怎么在Vue中使用ElementUI將excel文件上傳到服務(wù)器

今天就跟大家聊聊有關(guān)怎么在Vue中使用ElementUI將excel文件上傳到服務(wù)器，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

具體需求場(chǎng)景如下：

選擇excel文件后，需要把導(dǎo)入的excel文件手動(dòng)上傳到后臺(tái)服務(wù)器，并將導(dǎo)入成功后的統(tǒng)計(jì)結(jié)果顯示出來(lái)。官網(wǎng)也有手動(dòng)上傳的示例，通過(guò) action="url" 傳入地址的方式，但在實(shí)際項(xiàng)目中請(qǐng)求需要自己配置，下面具體說(shuō)明實(shí)現(xiàn)的方法。

說(shuō)明：

在上傳文件到展示統(tǒng)計(jì)結(jié)果，我們后端給了兩個(gè)接口：首先調(diào)用文件上傳接口，上傳成功后，根據(jù)后端返回的mark再調(diào)用統(tǒng)計(jì)結(jié)果接口。

屬性設(shè)置

.vue文件

<el-row>
    <div class="el-form-item__content">
        <el-upload ref="upload"
            accept=".xls,.xlsx"
            action="#"
            :auto-upload="false"
            :multiple="false"
            :file-list="fileList"
            :before-upload="beforeUpload"
            :http-request="uploadHttpRequest"
            :on-remove="fileRemove"
            :on-change="fileChange">
            <el-button size="small" type="primary">選擇文件</el-button>
            <div slot="tip" class="el-upload__tip">一次只能上傳一個(gè)xls/xlsx文件，且不超過(guò)10M</div>
        </el-upload>
    </div>
</el-row>
<el-row>
    <el-button size="small" @click="closeDialog">取 消</el-button>
    <el-button type="primary" size="small" @click="submitUpload">上 傳</el-button>
    <el-button type="primary" size="small" @click="downloadRes">下載反饋結(jié)果</el-button>
</el-row>

其中：

• action：上傳的地址，可以不用過(guò)多關(guān)注，但也不建議刪除，可用普通字符串代替

• auto-upload：是否自動(dòng)上傳，因這里是手動(dòng)上傳，所以設(shè)置為false

• multiple：是否支持多選，此處設(shè)置為 false

• file-list：上傳的文件列表數(shù)組

• before-upload：上傳文件之前的鉤子，參數(shù)為上傳的文件，可以在這里判斷上傳文件的類型，文件大小等

• http-request：自定義上傳的方法，會(huì)覆蓋默認(rèn)的上傳行為（即action="url"）

• on-remove：上傳文件移除時(shí)觸發(fā)的方法

• on-change：上傳文件狀態(tài)（添加，上傳成功或失?。└淖儠r(shí)觸發(fā)的方法

處理邏輯

邏輯處理代碼如下：

methods: {
    // 上傳文件之前的鉤子：判斷上傳文件格式、大小等，若返回false則停止上傳
    beforeUpload(file) {
        //文件類型
        const isType = file.type === 'application/vnd.ms-excel'
        const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        const fileType = isType || isTypeComputer
        if(!fileType) {
            this.$message.error('上傳文件只能是xls/xlsx格式！')
        }

        // 文件大小限制為10M
        const fileLimit = file.size / 1024 / 1024 < 10;
        if(!fileLimit) {
            this.$message.error('上傳文件大小不超過(guò)10M！');
        }
        return fileType && fileLimit
    },
    // 自定義上傳方法，param是默認(rèn)參數(shù)，可以取得file文件信息，具體信息如下圖
    uploadHttpRequest(param) {
        const formData = new FormData() //FormData對(duì)象，添加參數(shù)只能通過(guò)append('key', value)的形式添加
        formData.append('file', param.file) //添加文件對(duì)象
        formData.append('uploadType', this.rulesType)
        const url = `${this.myBaseURL}/operation/ruleImport/importData` //上傳地址
        axios.post(url, formData)
            .then( res => {
                const { data: { code, mark } } = res
                if(code === 0) {
                    param.onSuccess()  // 上傳成功的文件顯示綠色的對(duì)勾
                    this.uploadMark = mark
                }
                return this.countData(this.uploadMark) //根據(jù)響應(yīng)的 mark 值調(diào)用統(tǒng)計(jì)結(jié)果接口，返回一個(gè)promise以便進(jìn)行鏈?zhǔn)秸{(diào)用
            })
            .then( res => { //鏈?zhǔn)秸{(diào)用，統(tǒng)計(jì)結(jié)果的響應(yīng)
                const { data: { code, data } } = res
                if(code === 0) {
                    console.log('統(tǒng)計(jì)結(jié)果', data)
                }
            })
            .catch( err => {
                console.log('失敗', err)
                param.onError() //上傳失敗的文件會(huì)從文件列表中刪除
            })
    },
    // 統(tǒng)計(jì)結(jié)果
    countFile(mark) {
        return new Promise((resolve, reject) => {
            axios
                .get(`/operation/ruleImport/countData?mark=${mark}`)
                .then(res => {
                    resolve(res)
                })
                .catch(error => {
                    reject(error)
                })
        })
    },
    // 點(diǎn)擊上傳：手動(dòng)上傳到服務(wù)器，此時(shí)會(huì)觸發(fā)組件的http-request
    submitUpload() {
        this.$refs.upload.submit()
    },
    // 文件發(fā)生改變
    fileChange(file, fileList) {
        if (fileList.length > 0) {
            this.fileList = [fileList[fileList.length - 1]] // 展示最后一次選擇的文件
        }
    },
    // 移除選擇的文件
    fileRemove(file, fileList) {
        if(fileList.length < 1) {
            this.uploadDisabled = true //未選擇文件則禁用上傳按鈕
        }
    },
    // 取消
    closeDialog() {
        this.$refs.upload.clearFiles() //清除上傳文件對(duì)象
        this.fileList = [] //清空選擇的文件列表
        this.$emit('close', false)
    }
}

http-request 的param參數(shù)，打印結(jié)果如圖。通過(guò)param.file取得當(dāng)前文件對(duì)象。

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問(wèn)速度和用戶體驗(yàn)。

看完上述內(nèi)容，你們對(duì)怎么在Vue中使用ElementUI將excel文件上傳到服務(wù)器有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。