Ajax向Springmvc后台传输文件（前后端分离上传文件）

实现一个前后端分离的文件传输, 前端ajax发送数据, 后端spring boot接收

1.前端通过ajax向后台传文件不可再使用JSON数据，而是需要使用Formdata对象。添加文件或者参数都需要使用append方法。后端不再接收JSON格式的数据.

//创建文件传输使用的formdata对象
var ajaxData = new FormData()
//当用户选择文件之后，将文件添加到formdata对象中
$("#file").on('change', function(){
    var selectFiles = document.getElementById("file").files
    for (let i = 0; i < selectFiles.length; i += 1){
        ajaxData.append('files', selectFiles[i])
    }
})
    
//向对象中添加其它的参数
ajaxData.append('title', fileTitle)
ajaxData.append('id', loginUser.id)

// 打印ajax的formdata对象的方法, 需要使用entries, 获取FormData中的所有条目
for (var [a, b] of ajaxData.entries()) {
	console.log(a, b);
} 

// 当用户选择图片之后, 控制页面图片预览
// 监听文件按钮的change事件
$('#alimini_imgfile_ipt').on('change', function(){
    // 获取change事件后, input中的文件
    let selectFiles = $(this)[0].files
    // 如果没有选择文件那么就不往下执行了
    if(selectFiles.length === 0){
        return false
    }
    // 创建一个文件读取对象, 用以读取文件
    let fileReader = new FileReader();
    fileReader.readAsDataURL(selectFiles[0]);
    // 文件读取完毕之后, 将文件的url赋值到html中的img的src属性上
    fileReader.onload = function(event){
        $('#alimini_img_preview').attr("src", event.target.result)
    }
})

// 使用原生js获取上传文件的信息
let domFileInput = document.querySelector("#alimini_imgfile_ipt")
domFileInput.addEventListener('change', function(){
    // 注意这里selectedFiles获取的是一个fileList对象, 需要通过下标才能获取到其中文件
    let selectedFiles = this.files
    console.log(selectedFiles)
    // 判断上传文件的个数
    console.log('文件个数为', selectedFiles.length)
    // 判断上传文件的单个文件的大小, 获取第一个文件的大小, 单位为bit
    // 如果不让超过1M, 则使用 selectedFiles[0].size > 1024*1024*1 来判断
    console.log('文件的大小为', selectedFiles[0].size)
})

// 获取文件的地址
function getObjectURL(file) {
    var url = null ;
    if (window.createObjectURL!=undefined) { // basic
        // createObjectURL为浏览器自带方法, 可以获取文件路径
        url = window.createObjectURL(file) ;
    } else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
    } else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
}

2.通过Ajax传输文件的时候，ajax中的设置的参数有些许不同。不进行数据处理，不设置请求头信息和不使用JSON格式。这样数据会以原生表单的方式进行传递。

$.ajax({
   url: commonTargetHost + 'policy/upload.do',
   type: "post",
   processData: false, //不处理传递数据
   contentType: false, //不设置请求头内容 
   data: ajaxData,
   success: function(res){
       if (res.rst){
           alert(res.message)
       }else{
           alert(res.message)
       } 
   },
   error: function(res){
       console.log("请求错误", res);
   }
 })

3.后台springmvc接收数据方法，使用文件传输时候注意接受的格式以及添加HttpServletRequest request。若没有HttpServletRequest request则会报错并抛出异常。并且后端接受的数据不再是JSON格式.

@RequestMapping("/upload")
public Map<String, Object> uploadFile(@RequestParam("files") CommonsMultipartFile[] files,@RequestParam("title")String title,HttpServletRequest request) {	
	return uploadFilesService.uploadFile(files,title,id,request);
}

4. 补充一下前端html结构

<div style="width: 200px; height: 200px;">
	<!-- 点击这个占位图片时候, 触发flie input的点击事件 -->
	<img src="add.png" alt="添加图片" width="100%" height="100%"
	 onclick="document.getELementById(imgFileInput).onclick()" id="imgPreview">
	 <!-- 这里file input设置为display: none; 还能触发点击事件是我没想到的 -->
	 <!-- 这里的accept表示接收什么类型的文件 -->
	<input type="file" style="display: none;" id="imgFileInput" accept=".jpg, .jpeg, .png" >
</div>