1 <el-upload
2 class="avatar-uploader"
3 action
4 name="file1"
5 :show-file-list="false"
6 :http-request="uploadImg"
7 >
8 <div class="upload-btn">上传</div>
9 </el-upload>:http-request="uploadImg" 为重写的上传方法uploadImg(fileObj) {
let formData = new FormData();
formData.set("file", fileObj.file);
axios
.post('接口地址', formData, {
headers: {
"Content-type": "multipart/form-data"
}
}).then().catch();首先创建一个空的文件对象，let formData = new FormData();
然后通过 set 方法，把获取到的图片/文件，装入文件对象中；
然后设置请求头；
1 //POST传参序列化
2 axios.interceptors.request.use(
3 config => {
4 console.log(config, "request");
5 if (config.method === "post") {
6 let curPost = config.url.split("/")[config.url.split("/").length - 1];
7 if (curPost === "uploadpicture" || curPost === "uploadfile") {
8 return config; // 这里对上传文件/图片的 api 不做传参序列化处理
9 } else {
10 config.data = qs.stringify(config.data);
11 return config;
12 }
13 }
14 return config;
15 },
16 error => {
17 return Promise.reject(error);
18 }
19 );最重要的一步：
传参不能序列化，否则传递的就不是文件（file），导致上传无法成功。
