vue项目使用axios+element-ui的upload组件实现文件上传功能

2019/07/31 15:00
阅读数 1.3K
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),导致上传无法成功。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部