鍍金池/ 問答/HTML/ element-ui upload組件可否使用 axios通信

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

項目使用element-ui upload組件上傳文件場景。很是希望element能通過axios發(fā)送http, 這樣就可以使用 axios interceptor統(tǒng)一處理所有http調(diào)用的架構(gòu)。
如果不能用axios的話，對于后端發(fā)來的異常（未登錄、無權(quán)限、各種錯誤等），還需要再使用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>
回答
編輯回答
冷溫柔

upload有手動上傳文件的模式，你仔細(xì)看下

upload有change事件，會返回你上傳的文件及列表，保存下來，然后寫個按鈕手動提交保存的文件

2018年1月6日 02:53
編輯回答
憶當(dāng)年

可以通過 el-upload 的 beforeUpload方法中通過aixos post。方法return false，這樣el-upload就不會再post了。


      let param = new FormData()  // 創(chuàng)建form對象
      param.append('file', file, file.name)  // file對象是 beforeUpload參數(shù)
      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
2017年7月29日 17:12
編輯回答
眼雜

自己用axios實現(xiàn)一個上傳組件也是很容易的事情

2017年2月15日 03:09