通過Upload 的action方法 返回不了結(jié)果，可以通過on-success方法中獲取返回結(jié)果
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<Upload accept=".xls, .xlsx" :action="uploadUrl" :on-success="onSuccess" :on-error="handleError" :before-upload="beforeUpload" style="float:right"> <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ǔ)充知識(shí)：Element-UI中上傳的action地址相對(duì)問題
我想要在vue里只出現(xiàn)上傳地址后綴，然后具體的上傳地址，前綴是項(xiàng)目配置里的服務(wù)器地址
1、action直接寫相對(duì)地址
|
1
2
3
4
5
6
7
8
9
10
11
|
<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é)果，上傳請(qǐng)求的的前綴都是本地localhost:8080，并不是我想要的相對(duì)服務(wù)器的地址
2、屏蔽掉action地址，我自己寫請(qǐng)求
|
1
2
3
4
5
6
7
8
9
10
|
<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里這么寫
|
1
2
3
4
5
6
7
8
9
|
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è)格式的請(qǐng)求太好認(rèn)， 一長(zhǎng)串有沒有，里面包括了文件名…），當(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上
|
1
2
3
4
5
6
7
8
9
10
11
|
<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> |
好了，都好了，相對(duì)地址是服務(wù)器地址，上傳文件編碼也是multipart/form-data
以上這篇VUE UPLOAD 通過ACTION返回上傳結(jié)果操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/daniella05/article/details/105370350
