图片前端压缩后上传

前端代码 ：

 $("#input_file").change(function(){
        var files = this.files;
        var file=files[0];
        if (parseInt(file.size / 1024) > 6000) {
            alert("图片大小超过6M,请重新上传")
        }else{
            layer.load(0);
           photoCompress(file,{
                quality: 0.2
            },function (base64Codes) {
            var bl = convertBase64UrlToBlob(base64Codes);
              
            formdata.set('file',bl);
            //上传
            UpImgFile()
        })

        }

    });




/**
 * @param file: 上传的图片
 * @param objCompressed：压缩后的图片规格
 * @param objDiv：容器或回调函数
 */
function photoCompress(file, objCompressed, objDiv){
    var ready=new FileReader();
    ready.readAsDataURL(file);
    ready.onload=function(){
        var fileResult=this.result;
        canvasDataURL(fileResult,objCompressed,objDiv)
    }
}

function canvasDataURL(path, objCompressed, callback) {
    var img = new Image();
    img.src = path;
    img.onload = function () {
        var that = this;
        //默认压缩后图片规格
        var quality = 0.5;
        var w = that.width;
        var h = that.height;
        var scale = w / h;
        //实际要求
        w = objCompressed.width || w;
        h = objCompressed.height || (w / scale);
        if(objCompressed.quality && objCompressed.quality > 0 && objCompressed.quality <= 1){
            quality = objCompressed.quality;
        }

        //生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        // 创建属性节点
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(that, 0, 0, w, h);

        var base64 = canvas.toDataURL('image/jpeg', quality);
        // 回调函数返回base64的值
        callback(base64);
    }
}

function convertBase64UrlToBlob(urlData) {
    var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

function UpImgFile() {
    $.ajax({
        url: '${ctx}/user/upload',
        type: 'POST',
        cache: false, //上传文件不需要缓存
        data: formdata,
        processData: false, // 告诉jQuery不要去处理发送的数据
        contentType: false, // 告诉jQuery不要去设置Content-Type请求头
        success: function (data) {
            console.log(data);
            if(data=="error"){
                layer.msg('上传失败！');
            }else {
                var strs= data;
                $("#code").val(strs5);
            }

        },
        error: function (data) {
            layer.msg('图片上传失败！请重新选择！',{time: 20000,icon: 6});
            layer.closeAll();
        }
    });
    layer.closeAll();
}

后端：

@RequestMapping("upload")
    public void  uploadImg(HttpServletResponse response,@RequestParam("file") CommonsMultipartFile file) throws IOException {

  String path="e:static/img/";
  String name = RandomStringUtils.randomAlphanumeric(15)+".jpg";
  byte[] imgs = file.getBytes();;
  FileImageOutputStream outputStream =newFileImageOutputStream(newFile(path+"/"+name));
  outputStream.write(imgs,0,imgs.length);
  outputStream.close();  
  response.getWriter().print(name);

 }