详解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组件库使用，也能够很好地解决文件上传问题。