詳解el-uploadaction組件使用方法

一、el-uploadaction組件簡介

el-uploadaction組件是基於element-ui的el-upload組件進行封裝的，主要是為了解決el-upload組件不能向後端node.js服務器發送自定義http請求的問題。使用el-uploadaction組件能夠方便地上傳文件、發送請求等操作。

二、el-uploadaction組件參數說明

el-uploadaction組件的參數基本跟el-upload組件一致，只是增加了以下參數：

1. action

表示上傳文件的後端接口地址，跟el-upload組件的action參數一致。

<el-uploadaction :action="uploadUrl">
  <el-button slot="trigger">上傳文件</el-button>
</el-uploadaction>

2. http-request

表示定義上傳文件的自定義請求方法，繼承el-upload原有方法，增加xhr及uploadEvent參數。

<el-uploadaction :action="uploadUrl" :http-request="uploadFile">
    <el-button slot="trigger">上傳文件</el-button>
</el-uploadaction>

uploadFile(file, callback) {
    const xhr = new XMLHttpRequest()
    xhr.upload.addEventListener('progress', (event) =>{
        const {loaded, total} = event.target
        const progress = parseInt((loaded/total)*100)
        this.progress = progress // 更新進度條顯示
    }, false)
    xhr.onreadystatechange = () => {
        if(xhr.readyState === 4 && xhr.status === 200) {
            callback(JSON.parse(xhr.responseText))
        }
    }
    xhr.open('POST', this.uploadUrl, true)
    const formData = new FormData()
    formData.append('file', file)
    xhr.send(formData)
}

3. upload-success

表示文件上傳成功後的回調函數，接收一個參數res，為後端返回的響應結果。

<el-uploadaction :action="uploadUrl" :http-request="uploadFile" @upload-success="uploadSuccess">
    <el-button slot="trigger">上傳文件</el-button>
</el-uploadaction>

uploadSuccess(res) {
    if(res.code === 200) {
        this.$message.success(`上傳成功`)
    } else {
        this.$message.error(`上傳失敗：${res.message}`)
    }
}

三、使用el-uploadaction實現文件上傳功能

1. 安裝element-ui組件

使用el-uploadaction需要安裝element-ui組件，可以在項目根目錄執行以下命令來安裝element-ui組件：

npm i element-ui -S

2. 引入el-uploadaction組件

在需要使用el-uploadaction組件的Vue組件文件中，引入el-uploadaction組件：

import ElUploadAction from 'el-uploadaction'

3. 註冊el-uploadaction組件

在Vue組件內註冊el-uploadaction組件：

components: {
  'el-uploadaction': ElUploadAction
}

4. 使用el-uploadaction組件

在Vue組件模板中使用el-uploadaction組件即可實現上傳文件功能了：

<template>
  <div>
    <el-uploadaction :action="uploadUrl" :http-request="uploadFile" @upload-success="uploadSuccess">
      <el-button slot="trigger">上傳文件</el-button>
    </el-uploadaction>
    <div v-if="progress">上傳進度：{{progress}}%</div>
  </div>
</template>

四、總結

el-uploadaction組件是一個非常方便的文件上傳組件，相比於el-upload組件，el-uploadaction組件可以更加靈活地設置後端上傳接口，自定義上傳請求方法，方便後端接口開發人員進行文件上傳功能的開發，同時配合element-ui組件庫使用，也能夠很好地解決文件上傳問題。