概述
1、excel上传功能
ref="upload"
:show-upload-list="false"
:default-file-list="defaultList"
:on-success="handleSuccess"
:on-error="handleError"
:format ="['xlsx','xls']"
:max-size="fileSize"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
:before-upload="handleBeforeUpload"
action="//jsonplaceholder.typicode.com/posts/"
style="display: inline-block;width:58px;">
/*文件上传操作*/
import util from '@/libs/util.js';
export default {
name: 'insurance-data-import',
data () {
return {
fileName:'',
fileTemArr:['购买明细表','索赔记录表'],
fileSize:10,
defaultList:[],
};
},
mounted:function(){
},
methods: {
handleSuccess(res,file){
if(res.errcode === 0){
this.$Message.success("数据导入成功！")
this.$refs.upload.clearFiles()
}
},
handleError(error,file){
this.$Message.error("数据导入失败！")
},
handleFormatError (file) {
this.$Notice.warning({
title: '文件格式不正确',
desc: '文件 ' + file.name + ' 格式不正确，请上传.xls,.xlsx文件。'
});
},
handleMaxSize (file) {
this.$Notice.warning({
title: '文件大小错误',
desc: 'File ' + file.name + ' 文件大小不得超过'+this.fileSize+'M'
});
},
pro (file) {
return new Promise((resolve, reject) => {
setTimeout(() => {
this.$Notice.warning({
title: '文件名称错误',
desc: 'File ' + file.name
});
reject(new Error('err'))
}, 100)
})
},
//阻止上传//上传前判断用户选择的模板与实际上传的模板是否相同(文件名判断)
handleBeforeUpload (file) {
let name = '';
if(file.name){
// name = file.name.replace(/s/g,"").split('.')[0]
name = file.name.split('.')[0]
alert(name)
if(name !== this.fileName){
return this.pro(file)
}
}
}
}
};
最后
以上就是孝顺学姐为你收集整理的vue上传excel并展示_（一）vue导入上传excel功能的全部内容，希望文章能够帮你解决vue上传excel并展示_（一）vue导入上传excel功能所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复