VUE xls文件的上傳以及下載

upload組件運用以及修改使用

在開發一個後臺管理平臺的項目中遇到一個文件上傳以及下載的需求，如下交互圖所示
大致要完成這麼一個功能，當然實際上需要考慮更多，這次主要是用了element 的組件，在加上自己稍加改造完成的。在組件裏涉及到的方法基本都用到了。
先上一個結構代碼

 <el-dialog title="" :visible.sync="dialogFormVisible" @closed='closeDialog' :modal-append-to-body="false">
      <el-upload
        class="upload-demo"
        style="text-align: center"
        drag
        ref="upload"
        :headers="headers"
        :before-upload="onBeforeUpload"
        :auto-upload="false"
        :on-change="changeFile"
        :onError="uploadError"
        :on-remove="removefile"
        :onSuccess="uploadSuccess"
        :limit="1"
        accept=""
        action="/gateway/device/deviceStockImport"
        multiple>
        <p><img src="../../assets/image/img/[email protected]" alt=""></p>
        <div class="el-upload__text" style="font-size:0.16rem">將文件拖到此處，或<em>點擊上傳</em></div>
      </el-upload>
      <div class=result v-if=!check>
        <p><img :src=Imgsrc alt=""></p>
        <p>{{text_result}}</p>
        <p>{{result_text}}</p>
        <div v-if=sheet>失敗原因：<span @click="downerr()"><a href="javascript:;">下載失敗模板</a></span></div>
      </div>
      <div class="mould_text">
        <p>請上傳.xls格式的文件，點擊此處</p>
        <div @click=export_text() style="height: 0.16rem;line-height: 0.16rem">
          <a style="color: #0fa8f5;cursor: pointer" herf="javascript:;">下載模版</a>
        </div>
      </div>
      <div class="footer">
        <el-button v-if=check type="primary" :disabled=isAble @click="upload()">開始上傳</el-button>
        <el-button v-if=check @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="cancel()" v-if=!check>{{text}}</el-button>
        <el-button v-if=abolish @click="cancel1()">取 消</el-button>
      </div>
    </el-dialog>

1. 文件上傳成功情況
   因爲需要的是xls格式的文件，所以前端就可以做個判斷，把不是xls格式的文件進行攔截不讓上傳。

//文件上傳後判斷是不是xls格式
            onBeforeUpload(file) {
                const extension2 = file.name.split('.')[1] === 'xls';
                if (!extension2) {
                    document.querySelector('.el-upload-list--text').style.display = 'none';
                    this.text = '重新選擇文件';
                    this.text_result = '文件上傳失敗';
                    this.check = false;
                    this.abolish = true;
                    this.sheet = false;
                    this.Imgsrc = require('@/assets/image/img/[email protected]');
                    this.result_text = '請上傳.xls格式的文件!';
                }
                return extension2;
            }

// 文件選擇成功後觸發
            changeFile(file) {
                if (file.status == 'ready') {
                    document.querySelector('.el-upload--text').style.display = 'none';
                    document.querySelector('.mould_text').style.visibility = 'hidden';
                    document.querySelector('.el-upload-list--text').style.display = 'block';
                    this.isAble = false;
                }
            }

 // 上傳成功後的回調
            uploadSuccess(response, file, fileList) {
                if (response.data) {
                    document.querySelector('.el-upload-list--text').style.display = 'none';
                    this.text = '知道了'
                    this.text_result = '文件上傳成功'
                    this.check = false;
                    this.Imgsrc = require('@/assets/image/img/[email protected]');
                    this.taskId = response.data.taskId;
                    this.result_text = response.data.tips;
                    if (this.taskId) {
                        this.$parent.loading({}, 1, 10);
                        this.sheet = true;
                    } else {
                        this.sheet = false;
                        this.$parent.loading({}, 1, 10);
                    }
                } else {
                    document.querySelector('.el-upload-list--text').style.display = 'none';
                    this.text = '重新選擇文件'
                    this.check = false;
                    this.abolish = true;
                    this.sheet = false;
                    this.Imgsrc = require('@/assets/image/img/[email protected]');
                    this.result_text = response.msg;
                }
            }

2、上傳文件的時候可能需要下載一個文件模板所以這裏也寫了一個下載文件的方法
其主要就是調通接口獲取文件流，利用了a標籤的特性。

// 下載模板
            export_text() {
                this.axios.get(this.apiNames.device_download,
                    {
                        params: {
                            fileName: 'deviceStock'
                        },
                        headers: {
                            'content-type': 'application/vnd.ms-excel;charset=utf-8',
                            "token": this.$store.state.sessionId
                        },
                        responseType: "blob"
                    }
                ).then(
                    response => {
                        console.log(response.headers);
                        var blob = new Blob([response], {type: 'application/vnd.ms-excel;charset=utf-8'}); //指定格式爲vnd.ms-excel
                        var downloadElement = document.createElement('a');
                        var href = window.URL.createObjectURL(blob); //創建下載的鏈接
                        downloadElement.href = href;
                        downloadElement.download = 'deviceStock.xls'; //下載後文件名
                        document.body.appendChild(downloadElement);
                        downloadElement.click(); //點擊下載
                        document.body.removeChild(downloadElement); //下載完成移除元素
                        window.URL.revokeObjectURL(href); //釋放掉blob對象

                    }
                ).catch(
                    err => {
                        this.$Message.error('文件下載失敗,請稍後再試');
                    }
                );
            }

3. 文件上傳成功之後後臺要對文件進行解析並將結果進行返回，這裏用到的方法就是上面文件上傳成功後的回調，這邊分爲三種情況，文件解析失敗，文件解析成功並全部正確，文件解析成功並有部分錯誤
   
   
   這裏解析後如果有數據失敗會返回失敗的數據，直接文件下載跟下載模板一樣。
   大致就是這樣，也不是很難，主要了解這個組件，知道觸發的鉤子函數就可以了，另外數據導入後在頁面上會有個刷新直接用this.$parent調通父組件的數據加載方法就可以了。