VUE UPLOAD 使用ACTION實(shí)現(xiàn)返回上傳結(jié)果

發(fā)布時(shí)間：2020-11-04 16:53:38 來源：億速云閱讀：450 作者：Leah 欄目：開發(fā)技術(shù)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)VUE UPLOAD 使用ACTION實(shí)現(xiàn)返回上傳結(jié)果，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

通過Upload 的action方法返回不了結(jié)果，可以通過on-success方法中獲取返回結(jié)果

<Upload accept=".xls, .xlsx" :action="uploadUrl" :on-success="onSuccess" :on-error="handleError" :before-upload="beforeUpload" >
     <Button type="primary" icon="ios-cloud-upload-outline" >導(dǎo)入</Button>
 </Upload>
-----------------------------------------
computed: {
   uploadUrl() {    
   return baseUrl + "/ImportExcel/";   
  }
//file為ImportExcel方法返回的結(jié)果
onSuccess(file){
    if(file.code=="1")
    {
     this.$Message.error("導(dǎo)入失敗:" + file.msg);
     return;
    }      
   },

補(bǔ)充知識：Element-UI中上傳的action地址相對問題

我想要在vue里只出現(xiàn)上傳地址后綴，然后具體的上傳地址，前綴是項(xiàng)目配置里的服務(wù)器地址

1、action直接寫相對地址

<el-upload
      class="import-btn"
      :action="/base_data/import_data"
      :data="uplaodData"
      name="files"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      accept="xlsx,xls"
      :show-file-list="false">
      <el-button class="btn light small"><i class="icon iconfont icon-piliangdaoru"></i>批量導(dǎo)入</el-button>
     </el-upload>

這樣的結(jié)果，上傳請求的的前綴都是本地localhost:8080，并不是我想要的相對服務(wù)器的地址

2、屏蔽掉action地址，我自己寫請求

<el-upload
      class="import-btn"
      :action="111" //這里隨便寫，反正用不到，但是又必須要寫，無奈
      :before-upload="beforeUpload"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      accept="xlsx,xls"
      :show-file-list="false">
      <el-button class="btn light small"><i class="icon iconfont icon-piliangdaoru"></i>批量導(dǎo)入</el-button>
     </el-upload>

methods里這么寫

beforeUpload(file){
  let fd = new FormData();
  fd.append('files',file);//傳文件
  fd.append('id',this.srid);//傳其他參數(shù)
  axios.post('/api/up/file',fd).then(function(res){
      alert('成功');
  })
  return false //屏蔽了action的默認(rèn)上傳
},

這樣的吧但是這樣的我發(fā)過去的東西老是空的，應(yīng)該是我不太懂FormData()的用法吧，但是我單獨(dú)用FormData()的get方法，都能get到，后來發(fā)現(xiàn)是因?yàn)槲募幋a問題

默認(rèn)的文件編碼application/x-www-form-urlencoded是這個(gè)，但是上傳文件需要的是multipart/form-data （這個(gè)格式的請求太好認(rèn)，一長串有沒有，里面包括了文件名…），當(dāng)然有時(shí)候也會(huì)是這樣（files: (binary)），都是ok的

啊~，真的要郁悶了，最后還是讓我發(fā)現(xiàn)了一種辦法

那就是！??！

1、把全局配置的服務(wù)器地址引入

import url from '@/http/http'

2、在data里定義url：‘',

3、在create方法里this.url = url;

4、在上傳組件的action上

<el-upload
      class="import-btn"
      :action="url+this.uploadUrl" //手動(dòng)拼地址
      :data="uplaodData"
      name="files"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      accept="xlsx,xls"
      :show-file-list="false">
      <el-button class="btn light small"><i class="icon iconfont icon-piliangdaoru"></i>批量導(dǎo)入</el-button>
     </el-upload>

上述就是小編為大家分享的VUE UPLOAD 使用ACTION實(shí)現(xiàn)返回上傳結(jié)果了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

VUE UPLOAD 使用ACTION實(shí)現(xiàn)返回上傳結(jié)果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽