欢迎访问 生活随笔!

ag凯发k8国际

当前位置: ag凯发k8国际 > 前端技术 > vue >内容正文

vue

vue 自己写上传excel组件-ag凯发k8国际

发布时间:2024/10/14 vue 26 豆豆
ag凯发k8国际 收集整理的这篇文章主要介绍了 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);

},

总结

以上是ag凯发k8国际为你收集整理的vue 自己写上传excel组件_vue结合elementui组件 el-upload 上传excel表格(二)的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得ag凯发k8国际网站内容还不错,欢迎将ag凯发k8国际推荐给好友。

网站地图