概述

具體需求場景如下：

選擇excel檔案後，需要把匯入的excel檔案手動上傳到後臺伺服器，並將匯入成功後的統計結果顯示出來。官網也有手動上傳的示例，通過 action="url" 傳入地址的方式，但在實際專案中請求需要自己配置，下面具體說明實現的方法。

說明：

在上傳檔案到展示統計結果，我們後端給了兩個介面：首先呼叫檔案上傳介面，上傳成功後，根據後端返回的mark再呼叫統計結果介面。

屬性設定

.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">一次只能上傳一個xls/xlsx檔案，且不超過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">下載反饋結果</el-button>
</el-row>

其中：

• action：上傳的地址，可以不用過多關注，但也不建議刪除，可用普通字串代替
• auto-upload：是否自動上傳，因這裡是手動上傳，所以設定為false
程式設計客棧
• multiple：是否支援多選，此處設定為 false
• file-list：上傳的檔案列表陣列
• before-upload：上傳檔案之前的鉤子，引數為上傳的檔案，可以在這裡判斷上傳檔案的型別，檔案大小等
• http-request：自定義上傳的方法，會覆蓋預設的上傳行為（即action="url"）
• on-remove：上傳檔案移除時觸發的方法
• on-change：上傳檔案狀態（新增，上傳成功或失敗）改變時觸發的方法

處理邏輯

邏輯處理程式碼如下：

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 || isTy
 
程式設計客棧peComputer
        if(!fileType) {
            this.$message.error('上傳檔案只能是xls/xlsx格式！')
        }

        // 檔案大小限制為10M
        const fileLimit = file.size / 1024 / 1024 < 10;
        if(!fileLimit) {
            this.$message.error('上傳檔案大小不超過10M！');
        }
        return fileType && fileLimit
    },// 自定義上傳方法，param是預設引數，可以取得file檔案資訊，具體資訊如下圖
    uploadHttpRequest(param) {
        const formData = new FormData() //FormData物件，新增引數只能通過append('key',value)的形式新增
        formData.append('file',param.file) //新增檔案物件
        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()  // 上傳成功的檔案顯示綠色的對勾
                    this.uploadMark = mark
                }
                return this.countData(this.uploadMark) //根據響應的http://www.cppcns.com mark 值呼叫統計結果介面，返回一個promise以便進行鏈式呼叫
            })
            .then( res => { //鏈式呼叫，統計結果的響應
                const { data: { code,data } } = res
                if(code === 0) {
                    console.log('統計結果',data)
                }
            })
            .catch( err => {
                console.log('失敗',err)
                param.onError() //上傳失敗的檔案會從檔案列表中刪除
            })
    },// 統計結果
    countFile(mark) {
        XmRYCWreturn new Promise((resolve,reject) => {
            axios
                .get(`/operation/ruleImport/countData?mark=${mark}`)
                .then(res => {
                    resolve(res)
                })
                .catch(error => {
                    reject(error)
                })
        })
    },// 點選上傳：手動上傳到伺服器，此時會觸發元件的http-request
    submitUpload() {
        this.$refs.upload.submit()
 www.cppcns.com   },// 檔案發生改變
    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() //清除上傳檔案物件
        this.fileList = [] //清空選擇的檔案列表
        this.$emit('close',false)
    }
}

http-request 的param引數，列印結果如圖。通過param.file取得當前檔案物件。

以上就是詳解Vue ElementUI手動上傳excel檔案到伺服器的詳細內容，更多關於Vue ElementUI手動上傳excel檔案到伺服器的資料請關注我們其它相關文章！