vue+element-ui實現前端導入excel數據

vue+element-ui實現前端導入excel數據

<el-upload
       class="upload-demo"
       action=""
       accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
       :on-preview="handlePreview"
       :on-remove="handleRemove"
       :before-remove="beforeRemove"
       :http-request="uploadFile"
       multiple
       :limit="1"
       :on-exceed="handleExceed"
       :file-list="fileList">
       <el-button size="small" type="primary" @click="handlePreview">點擊上傳</el-button>
       <div slot="tip" class="el-upload__tip">只能上傳Excel文件</div>
</el-upload>

accept 打開指定文件類型

// 自定義上傳 導入數據
            uploadFile (item) {
                const form = new FormData();
                form.append('token', this.token);
                form.append('file1', item.file);
                updateFile(form).then(res => {
                    let data = res.data;
                    if (data.code == 600) {
                        login(this.$message, this.$router);
                    }
                    if(data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '導入成功!'
                        });
                        this.getUser(); //導入成功刷新列表
                        this.addFormVisible = false;
                    }else{
                        this.$message({
                            type: 'error',
                            message: data.msg
                        });
                    }
                }).catch(err => {
                })
            }

在api文件封裝請求函數

export const updateFile = params => {
    return axios.post(`${base}/shopBaby/file`, params);
}