最近在研究SpringBoot+Vue的文件上传，踩了不少坑。现在将正确的文件上传流程分享一下。
一、前端采用ElementUI组件
前端页面完整代码：
<template>
<el-upload
class="upload-demo"
action="http://localhost:1111/01/fileup"
:on-preview="handlePreview" //钩子的值是方法名，即钩子被触发后要执行的函数
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-change="handChange"
:on-exceed="handleExceed"
:auto-upload="false"
//上传的文件保存在fileList中
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
<el-button size="small" @click="fileup">提交</el-button>
</el-upload>
</template>
<script>
export default {
name: "fileup",
data() {
return {
currentFile:[] //作为存储中介，保存当前fileList已经添加的文件，用于axios发送文件
}
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handChange(file,fileList){
//一旦选中文件，就将该文件添加到currentFile中
this.currentFile.push(file)
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`您确定要移除 ${ file.name }吗？`);
},
fileup(){
//必须使用FormData对象向后台传递文件
let formData=new FormData();
let key;
//将待提交的文件放到FormData对象中，必须挨个放
for (key in this.currentFile){
formData.append("currentFile",this.currentFile[key].raw)
}
this.axios({
method:'post',
data:formData,
url:'http://localhost:1111/01/fileup'
}).then(function(resp){
console.log(resp.data);
})
}
}
}
</script>
<style scoped>
</style>1、< el-upload>组件属性的解释
（1）
action：这个属性是上传文件的地址。当我们指定了 auto-upload 属性，组件就会自动按 action 的地址提交。如果设置这个属性action=“none”，可以进行自定义，拓展性强。
（2）auto-upload：自动上传（选中文件立即上传），默认值是true，最好是设置为false，这样可以在点击提交按钮再提交。
（3）limit： 限制了上传文件的个数 。
（4）multiple：这个属性支持多文件上传，如果你是上传单文件这个属性设不设置都可以，如果是多文件，就要设置。
（5）accept：限制选择文件的类型。
（6）on-preview：当你选择文件后会显示已选择的文件列表，当你点击那个文件列表的的文件，就会触发钩子执行函数。
（7）before-upload：当你上传文件之前触发的函数（注意是上传文件前而不是选择文件之前）。
（8）on-remove：文件列表移除文件触发。
2、钩子函数参数的解释
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handChange(file,fileList){
console.log(file);
console.log(fileList)
},
handleExceed(files, fileList) {
}（1）
file：最新选择的文件
（2）fileList：已经选择过的文件列表
3、提交按钮@click绑定axios请求向后台传递文件
（1）axios请求是在我们自定义的fileup()函数部分，表单的file和fileList的作用域并不包含该函数。
要在Vue的data属性中定义currentFile列表作为存储中介，存储表单选中的文件，并作为axios请求的参数。
（2）利用 FormData 对象，我们可以通过 JavaScript 用一些键值对（key-value）来模拟一系列表单控件。与普通的 Ajax 相比，使用 FormData 的最大优点就是我们可以异步上传二进制文件。
必须使用FormData对象携带二进制文件向后台提交数据。
（3）必须传递文件的raw属性！！！！！！！
let key;
for (key in fileList){ //挨个添加文件
//第1个参数是存储的key，第2个参数是存储的value
formData.append("currentFile",fileList[key].raw) //要传raw属性
}
①往FormData对象中放file文件时不要直接把值传进去，而是传 raw 属性，这个才是文件。②往FormData对象中放file文件时， 若文件为多个，一定要一个一个进行添加，否则不会正确的传值。③若为多文件提交，append函数的第一个参数可以都设置为相同的，这样后台便于接收。
选择的文件的raw属性信息如下：
（4）axios请求如下
请求体表单参数为multipart/form-data格式。
请求体的表单数据为二进制类型。
二、后台接收文件并存储磁盘
后端完整代码
@CrossOrigin(origins = "http://localhost:8080",maxAge = 3600)
@PostMapping(value = "/fileup")
//@RequestParam的参数值为前端FormData对象的存储内容的key值
//多文件上传时，用MultipartFile[]数组进行接收，单文件也可以这样接收
public String fileup(@RequestParam("currentFile") MultipartFile[] files, HttpServletRequest req) {
System.out.println("接收到的文件有"+files.length+"个");
for(MultipartFile f:files){
System.out.println("正在存储"+f.getOriginalFilename()+"文件");
String path = "e:/upload/";
String name=f.getOriginalFilename();
File floder=new File(path);
if(!floder.isDirectory())
floder.mkdirs();
try{
f.transferTo(new File(floder,name));
} catch (Exception e) {
e.printStackTrace();
}
}
return "上传成功";
}1、配置文件设置接收文件参数
在配置文件application.properties中设置上传文件的参数：
spring.servlet.multipart.enabled=true //是否开启文件上传支持，默认为true
spring.servlet.multipart.file-size-threshold=0 //文件写入磁盘的阈值，默认为0
spring.servlet.multipart.location=E:\\temp //上传文件的临时保存位置
spring.servlet.multipart.max-file-size=1MB //上传的单个文件的最大大小，默认为1MB
spring.servlet.multipart.max-request-size=10MB //多文件上传时文件的总大小，默认为10MB
spring.servlet.multipart.resolve-lazily=false //文件是否延迟解析，默认是false2、数组接收多文件
（1）当前端传来多文件，后端用MultipartFile[]数组进行接收。
（2）在MultipartFile[]数组前面用@RequestParam("")指明该数组接收的FormData对象的存储内容的key值，因此前端在formData.append(“key”,value)添加文件时建议将所有上传文件的key设置成相同的，这样后端就可以只使用1个@RequestParam("key") MultipartFile[]接收所有的文件。
3、File文件操作
（1）创建文件
public File(String pathname) //使用一个文件路径创建一个File类的对象
public File(String parent, String child) //使用父路径和子路径结合代表文件路径File f = new File(“d:\test\”,”1.txt”);
//这样代表的文件路径是：d:\test\1.txt。
（2）创建文件夹
File file=new File("D:\\test");
if(!file.exists()){ //如果文件夹不存在
file.mkdir(); //创建文件夹该方法的作用是创建当前文件文件夹，而不创建该路径中的其它文件夹。假设d盘下只有一个test文件夹，则创建d:\test\abc文件夹则成功，如果创建d:\a\b文件夹则创建失败，因为该路径中d:\a文件夹不存在。如果创建成功则返回true，否则返回false。
public boolean mkdirs()该方法的作用是创建文件夹，如果当前路径中包含的父目录不存在时，也会自动根据需要创建
（3）createNewFile()
public boolean createNewFile() throws IOException该方法的作用是创建指定的文件。该方法只能用于创建文件，不能用于创建文件夹，且文件路径中包含的文件夹必须存在。
（4）delete()
public boolean delete()该方法的作用是删除当前文件或文件夹。如果删除的是文件夹，则该文件夹必须为空。如果需要删除一个非空的文件夹，则需要首先删除该文件夹内部的每个文件和文件夹，然后在可以删除，这个需要书写一定的逻辑代码实现。
（5）exists()
public boolean exists()该方法的作用是判断当前文件或文件夹是否存在。
（6）isDirectory()
public boolean isDirectory()该方法的作用是判断当前File对象是否是目录。
（7）isFile()
public boolean isFile()该方法的作用是判断当前File对象是否是文件
（8）getAbsolutePath()
public String getAbsolutePath()该方法的作用是获得当前文件或文件夹的绝对路径。例如c:\test\1.t则返回c:\test\1.t。
（9）getName()
public String getName()该方法的作用是获得当前文件或文件夹的名称。例如c:\test\1.t，则返回1.t。
（10）length()
public long length()该方法的作用是返回文件存储时占用的字节数。该数值获得的是文件的实际大小，而不是文件在存储时占用的空间数
（11）list()
public String[] list()该方法的作用是返回当前文件夹下所有的文件名和文件夹名称。说明，该名称不是绝对路径。
（12）listFiles()
public File[] listFiles()该方法的作用是返回当前文件夹下所有的文件对象。
4、MultipartFile文件操作
（1）getBytes()
public byte[] getBytes()获取文件数据
（2）getContentType[]
public String getContentType[]获取文件类型，如image/jpeg等
（3）getInputStream()
public InputStream getInputStream()获取文件流
（4）getName()
public String getName()获取表单中文件组件的名字
（5）getOriginalFilename()
public getOriginalFilename()获取上传文件的原名
（6）getSize()
public Long getSize()获取文件的字节大小，单位为byte
（7）isEmpty()
public boolean isEmpty()确定是否有上传文件
（8）transferTo()
public void transferTo(File dest)将上传文件保存到一个目录文件中
