使用elementUI的upload上傳文件，用自定義請求（FormData）覆蓋默認action，並實現表格預覽excel數據

需求

1、使用elementui組件庫的upload上傳文件
2、後端接口要求前臺將文件對象以FormData的形式發送請求
3、前端請求接口前，要提前預覽數據

方法

1、用elementUI組件的upload提供的 http-request 鉤子覆蓋默認的上傳行爲，實現自定義上傳
2、使用 xlsx 將文件流數據轉換成JSON格式的數據

以下是代碼實現：

首先安裝xlsx：

npm install xlsx --save

安裝成功後，在package.json文件中有如下依賴：

"dependencies": {
    "xlsx": "^0.16.0"
  },

<template>
    <div class="upload-excel">
        這裏用來測試elementUI的upload上傳文件，並獲取文件流和json格式的header和body數據
        <el-upload
                class="file-upload"
                ref="fileUpload"
                action=""
                :http-request="handleRequest"
                :on-remove="handleRemove"
                :on-exceed="handleExceed"
                :before-remove="handleBeforeRemove"
                :on-change="handleChange"
                :file-list="fileList"
                :multiple="false"
                :auto-upload="false"
                accept=".xls,.xlsx"
                :limit="1">
            <el-button size="small" type="primary">點擊上傳</el-button>
        </el-upload>
        <el-button type="primary" size="mini" @click="sendFile">發送文件</el-button>
    </div>
</template>

<script>
    import XLSX from "xlsx"

    export default {
        name: "TestUploadExcel",
        data() {
            return {
                fileList: [],
            }
        },
        methods: {
            /**
             * 上傳的文件個數超出限制時觸發的鉤子
             * @param files
             * @param fileList
             */
            handleExceed(files, fileList) {
                this.$message.warning(`當前限制選擇 3 個文件，本次選擇了 ${files.length} 個文件，共選擇了 ${files.length + fileList.length} 個文件`);
            },
            sendFile() {
                this.$refs.fileUpload.submit();
            },
            /**
             * 覆蓋默認的上傳文件，自定義實現文件上傳
             */
            handleRequest(params) {
                console.log("request", params);
                let formData = new FormData();
                formData.append("file", params.file);
                // ArchiveImportHttpService.uploadFile({
                //     userId: window.$config.userId,
                //     appId: window.$config.appId,
                //     req: formData
                // }).then(({data}) => {
                //     console.log(data);
                // }).catch(err => {
                //     console.log(err);
                // })
            },
            /**
             * 文件列表移除文件時的鉤子
             * @param file
             * @param fileList
             */
            handleRemove(file, fileList) {
                console.log("remove", file, fileList);
            },
            /**
             * 文件狀態改變時的鉤子，添加文件、上傳成功和上傳失敗時都會被調用
             * @param file
             */
            handleChange(file) {
                this.file2JSON(file).then(data => {
                    // data對象的每個元素就是excel文件的每個sheet頁的數據
                    console.log(data);
                }).catch(err => {
                    console.log(err);
                })
            },
            /**
             * 刪除文件之前的鉤子，參數爲上傳的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，則停止刪除。
             * @param file
             * @param fileList
             * @return {Promise<MessageBoxData> | *}
             */
            handleBeforeRemove(file, fileList) {
                return this.$confirm(`確定移除 ${file.name}？`);
            },
            /**
             * 使用xlsx將excel文件對象轉換成json格式
             * @param file
             * @return {Promise<unknown>}
             */
            file2JSON(file) {
                return new Promise((resolve, reject) => {
                    let reader = new FileReader();

                    reader.onload = function (event) {

                        let resSheet = XLSX.read(event.target.result, {
                            type: "binary"
                        });

                        let resJSON = [];
                        resSheet.SheetNames.forEach(sheetName => {
                            resJSON.push({
                                sheetName: sheetName,
                                sheet: XLSX.utils.sheet_to_json(resSheet.Sheets[sheetName])
                            });
                        });

                        resolve(resJSON);
                    };

                    reader.readAsBinaryString(file.raw);
                });
            }
        }
    }
</script>

<style scoped lang="stylus">
    .upload-excel
        width 100%
        height 100%
        >>> .el-upload__input
            display none
</style>

效果