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

项目使用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>

回答:

可以通过 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

回答:

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

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

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注