Spring Boot + Vue 前后端分离，两种文件上传方式总结

importData() {

let myfile = this.$refs.myfile;

let files = myfile.files;

let file = files[0];

var formData = new FormData();

formData.append(“file”, file);

this.uploadFileRequest(“/system/basic/jl/import”,formData).then(resp=>{

if (resp) {

console.log(resp);

}

})

}

关于这段上传核心逻辑，解释如下：

1. 首先利用 Vue 中的 $refs 查找到存放文件的元素。

2. type 为 file 的 input 元素内部有一个 files 数组，里边存放了所有选择的 file，由于文件上传时，文件可以多选，因此这里拿到的 files 对象是一个数组。

3. 从 files 对象中，获取自己要上传的文件，由于这里是单选，所以其实就是数组中的第一项。

4. 构造一个 FormData ，用来存放上传的数据,FormData 不可以像 Java 中的 StringBuffer 使用链式配置。

5. 构造好 FromData 后，就可以直接上传数据了，FormData 就是要上传的数据。

6. 文件上传注意两点，1. 请求方法为 post，2. 设置 Content-Type 为 multipart/form-data 。