vue中使用element-ui實現excel表格導入

vue中使用element-ui實現excel表格導入

vue：

<el-upload class="avatar-uploader" :action="url" :headers="token"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
            :show-file-list="false" :before-upload="beforeAvatarUpload" :on-progress="uploading"
            :on-success="importSuccess" :on-error="importError">
    <el-button type="success">導入</el-button>
</el-upload>

 

js：

import Cookies from 'js-cookie'
export default {
    data() {
        return {
            url: `${window.SITE_CONFIG['apiURL']}/fenglianmeng/bdpartservant/importExcel`,
            token: {
                token: Cookies.get("token")
            },
        }
    },
    methods: {
        beforeAvatarUpload(file) {
        },
        uploading() {
            this.loading = true;
        },
        importSuccess(res) {
            this.loading = false
            if (res.code == 500) {
                return this.$message.error('導入錯誤，請以正確格式填寫文件');
            }
            if (res.code !== 0) {
                return this.$message.error(res.msg);
            }
            this.$message({
                message: '導入成功',
                type: "success",
                duration: 500,
                onClose: () => {
                    this.getDataList()
                }
            });
        },
        importError(err) {
            this.loading = false;
            this.$message.error('服務器錯誤，導入失敗')
        },
    }
}