element-ui upload组件可否使用 axios通信

Question

项目使用element-ui upload组件上传文件场景。很是希望element能通过axios发送http, 这样就可以使用 axios interceptor统一处理所有http调用的架构。
如果不能用axios的话，对于后端发来的异常（未登录、无权限、各种错误等），还需要再使用element uoload组件时再处理一遍，麻烦。

        <el-upload
          :with-credentials="true"
          name="file"
          action="http://localhost:9082/fileupload"
          :data = "uploadParam"
          :show-file-list="false"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :before-upload="beforeUpload">
          <i class="fa fa-upload"></i>
        </el-upload>

Answer 1

可以通过 el-upload 的 beforeUpload方法中通过aixos post。方法return false，这样el-upload就不会再post了。

      let param = new FormData()  // 创建form对象
      param.append('file', file, file.name)  // file对象是 beforeUpload参数
      let config = {
        headers: {'Content-Type': 'multipart/form-data'}
      }
     // 添加请求头
    axios.post('http://172.19.26.60:8081/rest/user/headurl', param, config)
        .then(response => {
          if (response.data.code === 0) {
            self.ImgUrl = response.data.data
          }
          console.log(response.data)
        })
    }
    
    return false

Answer 2

upload有手动上传文件的模式，你仔细看下

upload有change事件，会返回你上传的文件及列表，保存下来，然后写个按钮手动提交保存的文件

Answer 3

自己用axios实现一个上传组件也是很容易的事情