1. 使用element-ui 的 el-upload 进行上传
注意：:http-request 指令的使用
使用该指令， :on-success, :on-error 指令是不会触发的http-request 覆盖默认的上传行为，可以自定义上传的实现
但是需要将 action置空，action=""
<el-upload
action=" "
:show-file-list="false"
:http-request="uploadFiles"
>
<div class="upload">
<img
class="smallImg"
src="@/assets/images/whiteCap/icon_gaitouxian.png"
/>
<div>修改头像</div>
</div>
</el-upload>
- methods,调用请求方法
@params 参数：是http-request 指定自带的成功回调参数。
async uploadFiles(param) {
const res = await uploadFiles({ upload: param.file });
console.log(res);
if(res.status == "200" && res.data.retStatus == "000") {
this.userInfo.headPortrait = res.data.retBody.attach;
}
// console.log(param.file);
},
- request.js 封装请求函数
设置为 multipart/form-data 表单类型。
//文件上传接口：
export const uploadFiles = (data) => {
return service({
url: '/API/nsps/common/uploadFiles',
method: 'post',
data,
contentType: "multipart/form-data",
})
}
- 需要对表单数据就行统一格式化
在axios请求拦截器统一设置
//请求拦截
service.interceptors.request.use((config) => {
//统一处理表单格式
if (config.contentType === "multipart/form-data") {
//formData 表示表单数据的键值对 key/value 的构造方式
const formData = new FormData();
//这里遍历一下 因为有可能除了upload 还有其他参数的嘛
for (let key in config.data) {
//再一个个append进去
formData.append(key, config.data[key]);
}
//重新赋值给config.data -------return出去
config.data = formData;
//这里设置multipart/form-data 表单传数据需要的contentType
config.headers["Content-Type"] = config.contentType;
}
config.responseType && (config.responseType = "blob");
return config;
})
