Vue組件代碼：

auto-upload屬性需要設置成false,否則有些原本的屬性或者函數沒用上的話會報錯！！！(我這種寫法比較簡便)

class="upload-demo"

ref="upload"

action

:on-change="uploadChange"

:on-remove="handleRemove"

:file-list="fileList"

:limit="1"

:auto-upload="false">

選取文件

上傳到服務器

只能上傳jpg/png文件，且不超過500kb

js代碼部分(接口是axios封裝)：

import {} form ......;

export default {

data() {

return {

fileList: [],

};

},

methods: {

uploadChange(file, fileList){

this.fileList = fileList;

},

submitUpload() {

let formFile = new FormData();

let file = this.fileList[0].raw;

formFile.append("file", file);

this.getToExcel(formFile);

},

getToExcel(formFile){

importLoseOrder(formFile).then(res=>{

if(res.data.code==200){

this.successMsg('success', res.data.msg);

}else{

this.errorMsg(res.data.msg);

}

}).catch(err=>{

this.errorMsg('服務器錯誤');

})

},

},

};

//刪除觸發

handleRemove(file, fileList) {

this.errorMsg('你已成功移除文件：'+file.name+', 剩余文件數量：'+fileList.length);

},

總結

以上是生活随笔為你收集整理的vue 自己写上传excel组件_vue结合elementui组件 el-upload 上传excel表格（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。