在开发过程中遇到了文件上传需求,因是老代码也使用了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:banneruploadFile(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' }