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;
}