springmvc h5上传图片

　　工作中开发一个评价功能，需要上传拍照的图片，后台使用springmvc接收文件，前端FormData异步提交。

1. spring配置multipartResolver

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="UTF-8" /> <!-- 编码 -->
        <property name="maxInMemorySize" value="5120000" /> <!-- 上传时占用最大内存大小 (10240) -->
        <property name="uploadTempDir" value="/" /> <!-- 上传临时保存目录名 ，带文件上传完成之后会自动删除保存的文件 -->
        <property name="maxUploadSize" value="-1" /> <!-- 最大文件大小，-1为无限止(-1) -->
    </bean>

2. 图片处理

现在的手机拍出的照片都比较大，一般都会进行压缩处理，这里提供一个开源插件:https://github.com/stomita/ios-imagefile-megapixel.  因为要预览图片，所以img实际是被转为了base64字符串进行显示：

图片压缩:

//压缩
var mpImg = new MegaPixImage(file);
var $img = document.createElement('img');
mpImg.render($img, { maxWidth: 1000, maxHeight: 1000, quality: 0.5},function () {
    //1.获取压缩完成后的base64
    var imgSrc = $img.src;

    //2.压缩完后上传
});

 

3. 图片上传方式

　　1.base64字符串上传,直接上传base64字符串，后台接收到字符串后解析base64转为file，因为1张图片生成的base64比较大，多张图片的话，请求体过大。

        2. blob上传，将base64转为blob,然后后台以 List<MultipartFile>接收。

4. 上传

因为我用的是blob上传，所以将base64转为了blob，将上传的字段添加到FormData，然后ajax异步上传。

var formdata = new FormData();
formdata.append("userNo", "001");
formdata.append("content", "appraise content");
var imgs = $("#fileList .prev");
for (var i = 0;i < imgs.length;i++){//批量上传
　　formdata.append("uploadFileList",dataURItoBlob(imgs[i].src));//dataURItoBlob(imgs[i].src)将base64转为Blob
}

//异步上传
$.ajax({
　　data:formdata,
　　url:'/test/upload',
　　type:"POST",
　　processData : false,
　　contentType : false,/**必须false才会自动加上正确的Content-Type**/
　　success:function(data){
　　　　//do it
　　},
　　error:function(XMLHttpRequest, textStatus, errorThrown){
　　　　//error
　　}
});

function dataURItoBlob(dataUrl) {
    var byteString = atob(dataUrl.split(',')[1]);
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], { type: 'image/jpeg' });
}

 

 5. 后台接收

@RequestMapping("/test/upload")
@ResponseBody
public Result<Boolean> submit(Model model,SubmitVo vo){
    List<MultipartFile> fileList = vo.getUploadFileList();
    //上传到本地,或者文件服务器
}

//以实体接收上传信息
public class SubmitVo implements Serializable {
    private String userNo;
    private String content;
    private List<MultipartFile> uploadFileList;
}