在开发过程中遇到了文件上传需求，因是老代码也使用了element-ui，所以上传我也使用了其中的 el-upload，官方提供了demo，但是没有自定义上传文件的demo
html
<el-upload
:show-file-list="false"
action="customize"
class="upload-demo"
:http-request="uploadLogo"
:on-change="uploadFileChange"
:file-list="logoList"
>
<el-button size="small" type="primary" plain>点击上传</el-button>
<div slot="tip" class="el-upload__tip">
(请上传图片不超过2M的png、jpeg、jpg格式)
</div>
</el-upload>
js
/**
* @desc: 上传logo
* @Author: wkiwi
* @function: uploadLogo
* @param {*} param
*/
uploadLogo(param){
const file = param.file;
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error("请上传2M以下的logo");
return false;
}
this.toUploadFile(file,'logo')
},
/** * @desc: 上传文件 * @Author: wkiwi * @function: toUploadFile * @param {*} */ toUploadFile(file,fileType){ // 通过 FormData 对象上传文件 var formData = new FormData(); formData.append("file", file); formData.append("file_type", fileType);//文件类型，logo:logo, banner:banner uploadFile( formData ).then(res=>{ console.log(res) }) console.log('fileName',file.name) },
因为上传业务中涉及到文件类型的判断，所以需要使用formData 处理对象
注意上述代码有除file还有file_type字段，需要统一formData
不可出现下述情况（自己在这搞了两个小时，拍死自己）
/**
* @desc: 上传文件
* @Author: wkiwi
* @function: toUploadFile
* @param {*}
*/
toUploadFile(file,fileType){
// 通过 FormData 对象上传文件
var formData = new FormData();
formData.append("file", file);
formData.append("match_id", this.matchId);
formData.append("file_type", fileType);//文件类型，logo:logo, banner:banner
uploadFile({
file:formData,file_type:fileType
}).then(res=>{
console.log(res)
})
console.log('fileName',file.name)
},action需要设置一个字符串，不填写会报警告
在使用axios中 需要单独设置请求头
headers:{
'Content-Type':'multipart/form-data' //值得注意的是，这个地方一定要把请求头更改一下
},如果请求参数使用了 qs 进行了封装，那么在上传的时候请对上传的参数去掉 qs 的封装，要不然会引起一些问题
return params instanceof FormData ? parame : qs.stringify(params, { arrayFormat: 'repeat' }
