700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > vue 自己写上传excel组件_vue结合elementui组件 el-upload 上传excel表格(二)

vue 自己写上传excel组件_vue结合elementui组件 el-upload 上传excel表格(二)

时间:2022-02-28 07:16:22

相关推荐

vue 自己写上传excel组件_vue结合elementui组件 el-upload 上传excel表格(二)

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);

},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。