工具：vue+elementUI(upload组件)
要求：熟悉elementUI的uplaod组件及其特性
Get请求单文件上传
get请求文件上传非常简单，写好action和data即可。
<el-upload ref="upload" action="你上传的地址" data="uploadData(你给后端的传参)" :auto-upload="false">
<el-button slot="trigger" type="primary">选取文件</el-button>
</el-upload>
<el-button type="primary" @click="submitFile">上传文件</el-button>
注意：data只接受object，该属性会将obj转换为对应的参数拼接string类型。
上传方式是以elementUI封装好的默认上传方式，调用其定义好的方法即可。
submitFile() {
this.$refs.upload.submit();
}
Post请求多文件上传
此处用到了FormData，不了解的同学可以进入此处了解 FormData使用详解
<el-upload
ref="upload"
action=""
accept=".jpg, .jpeg, .png"
:http-request="postUpFile(自定义上传方式)"
:on-change="handleFileChange"
:file-list="fileList"
:auto-upload="false"
multiple>
<el-button slot="trigger" type="primary">选取文件</el-button>
</el-upload>
<el-button type="primary" @click="submitFile">上传文件</el-button>
注意：http-request为自定义上传方式，但action为必填项
data() {
return {
fileList: [], // 选取后的文件数组
formData: '', // 给后端传的文件流与表单参数
uploadData: {} // 表单数据
};
},
computed: {
uploadData: {}
},
methods: {
// 改变文件，对文件的校验
// 此处举例只能上传图片
handleFileChange(file, fileList) {
let testmsg = file.name.substring(file.name.lastIndexOf('.') + 1); // 取到后缀名
constextension = testmsg === 'jpg';
const extension2 = testmsg === 'png';
const extension3 = testmsg === 'jpeg';
const isLt2M = file.size / 1024 / 1024 < 1; //这里做文件大小限制
if (!extension && !extension2 && !extension3) {
this.$message({
message: '上传文件只能是jpg/jpeg/png格式!',
type: 'warning'
});
fileList.splice(0, fileList.length); // 删除掉当前上传的错误文件
} else if (!isLt2M) {
this.$message({
message: '上传文件大小不能超过 1MB!',
type: 'warning'
});
fileList.splice(0, fileList.length); // 删除掉当前上传的错误文件
}
},
// 自定义上传方式
postUpFile(param) {
this.formData = new FormData(); // 自定义一个新的FormData
this.formData.append('file', param.file); // 将文件流添加到formData中
},
// 上传
submitFile() {
this.$refs.upload.submit(); // 调用自定义上传方式，一定要在调接口之前调用
let uploadDataStr = JSON.stringify(this.uploadData); // 看后端的接收方式，此处举例：接收String格式
this.formData.append('data', uploadDataStr);
//调接口将this.formData传给后台即可
}
}
注意：elementUI封装的自定义上传方法中，其并不是多文件一起添加到'file'中，而是一个个添加的，若想将调用接口的方法放在此方法中，请做好点击一次调多次接口的准备（此处大坑！注意安全！）
自此，本文就结束了。大家互相学习，有错误或者更好的方法请留言，谢谢大家~
参考链接：
原生formdata附件与表单上传
vue+axios+elementUI文件上传与下载
