丝滑上传--El-Upload强势助攻多类型文件无压力上传，附带接口参数！

前端

2023-04-01 22:45:15

El-Upload：功能强大，满足多元文件上传需求

在Vue.js应用中，文件上传是一个常见需求。而El-Upload组件凭借其丰富的功能和灵活性，成为处理文件上传的最佳选择。

场景模拟：赋能灵活的文件上传

假设你要构建一个支持不同文件类型（如图像、音频和视频）、大小限制和手动上传的文件上传系统。同时，你希望通过后端接口传递文件和上传者的附加信息。

解决方案：El-Upload携手后端接口，多维满足需求

El-Upload组件通过以下特性完美满足你的需求：

灵活的文件类型限制： 通过设置accept属性，轻松限制可上传的文件类型。
便捷的手动上传： 设置autoUpload属性为false，再调用uploadFiles方法即可实现手动上传。
通过接口传递参数： 利用El-Upload的data属性，将额外参数传递给后端接口，实现丰富功能。
上传进度实时显示： onProgress事件让你实时显示上传进度，提升用户体验。
上传成功后的回调： onSuccess事件会在上传完成后触发，便于处理上传成功后的逻辑。

代码示例：实践出真知

<el-upload
  :action="uploadUrl"
  :accept="accept"
  :auto-upload="false"
  :multiple="true"
  :on-progress="handleProgress"
  :on-success="handleSuccess"
>
  <i class="el-icon-upload"></i>
  <span>点击上传文件</span>
</el-upload>

import { ref } from 'vue'

export default {
  setup() {
    const accept = ref('image/*')
    const uploadUrl = 'http://localhost:3000/upload'
    const handleProgress = (event) => {
      // 上传进度处理
    }
    const handleSuccess = (response) => {
      // 上传成功处理
    }

    return {
      accept,
      uploadUrl,
      handleProgress,
      handleSuccess,
    }
  },
}