溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關VUE UPLOAD 使用ACTION實現返回上傳結果，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
通過Upload 的action方法 返回不了結果，可以通過on-success方法中獲取返回結果
<Upload accept=".xls, .xlsx" :action="uploadUrl" :on-success="onSuccess" :on-error="handleError" :before-upload="beforeUpload" >
<Button type="primary" icon="ios-cloud-upload-outline" >導入</Button>
</Upload>
-----------------------------------------
computed: {
uploadUrl() {
return baseUrl + "/ImportExcel/";
}
//file為ImportExcel方法返回的結果
onSuccess(file){
if(file.code=="1")
{
this.$Message.error("導入失敗:" + file.msg);
return;
}
},補充知識：Element-UI中上傳的action地址相對問題
我想要在vue里只出現上傳地址后綴，然后具體的上傳地址，前綴是項目配置里的服務器地址
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>批量導入</el-button>
</el-upload>這樣的結果，上傳請求的的前綴都是本地localhost:8080，并不是我想要的相對服務器的地址
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>批量導入</el-button>
</el-upload>methods里這么寫
beforeUpload(file){
let fd = new FormData();
fd.append('files',file);//傳文件
fd.append('id',this.srid);//傳其他參數
axios.post('/api/up/file',fd).then(function(res){
alert('成功');
})
return false //屏蔽了action的默認上傳
},這樣的吧但是這樣的我發過去的東西老是空的，應該是我不太懂FormData()的用法吧，但是我單獨用FormData()的get方法，都能get到，后來發現是因為文件編碼問題
默認的文件編碼application/x-www-form-urlencoded是這個，但是上傳文件需要的是multipart/form-data （這個格式的請求太好認， 一長串有沒有，里面包括了文件名…），當然有時候也會是這樣（files: (binary)），都是ok的
啊~，真的要郁悶了，最后還是讓我發現了一種辦法
那就是！！！
1、把全局配置的服務器地址引入
import url from '@/http/http'
2、在data里定義url：‘',
3、在create方法里this.url = url;
4、在上傳組件的action上
<el-upload
class="import-btn"
:action="url+this.uploadUrl" //手動拼地址
: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>批量導入</el-button>
</el-upload>上述就是小編為大家分享的VUE UPLOAD 使用ACTION實現返回上傳結果了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
