vue上传excel并展示_（一）vue导入上传excel功能

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)

}

}

}

}

};