（一）vue导入上传excel功能

1、excel上传功能

<template>
    <div class="insuranceDataImport">
 <Upload
                                            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;">
                                        <div>购买明细表</div>
                                    </Upload>

</div>
</template>

 /*文件上传操作*/
<script>
    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)
                    }
                }
            }
        }
    };
</script>

扩展阅读