1. 使用element-ui 的 el-upload 進(jìn)行上傳
注意：:http-request 指令的使用
使用該指令政基， :on-success, :on-error 指令是不會(huì)觸發(fā)的http-request 覆蓋默認(rèn)的上傳行為，可以自定義上傳的實(shí)現(xiàn)
但是需要將 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,調(diào)用請(qǐng)求方法
@params 參數(shù)：是http-request 指定自帶的成功回調(diào)參數(shù)。
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 封裝請(qǐng)求函數(shù)
設(shè)置為 multipart/form-data 表單類型哑梳。
//文件上傳接口：
export const uploadFiles = (data) => {
return service({
url: '/API/nsps/common/uploadFiles',
method: 'post',
data,
contentType: "multipart/form-data",
})
}
- 需要對(duì)表單數(shù)據(jù)就行統(tǒng)一格式化
在axios請(qǐng)求攔截器統(tǒng)一設(shè)置
//請(qǐng)求攔截
service.interceptors.request.use((config) => {
//統(tǒng)一處理表單格式
if (config.contentType === "multipart/form-data") {
//formData 表示表單數(shù)據(jù)的鍵值對(duì) key/value 的構(gòu)造方式
const formData = new FormData();
//這里遍歷一下 因?yàn)橛锌赡艹藆pload 還有其他參數(shù)的嘛
for (let key in config.data) {
//再一個(gè)個(gè)append進(jìn)去
formData.append(key, config.data[key]);
}
//重新賦值給config.data -------return出去
config.data = formData;
//這里設(shè)置multipart/form-data 表單傳數(shù)據(jù)需要的contentType
config.headers["Content-Type"] = config.contentType;
}
config.responseType && (config.responseType = "blob");
return config;
})
