设计师必看！超详细的el-upload二次封装指南

前言

在日常开发中，文件上传是一个常见的功能需求。Element UI提供了el-upload组件，可以轻松实现文件上传功能。但有时候，我们需要对el-upload组件进行二次封装，以满足更复杂的业务需求。

需求分析

主要需求就三个，如下：

• 文件拖拽上传
• 不仅能单文件上传，多文件也可以同时上传
• 显示上传列表，能够对已上传文件进行撤销操作

效果演示

演示地址

代码实现

template

<el-upload
  :action="uploadUrl"
  :headers="headers"
  :multiple="multiple"
  :data="data"
  :name="name"
  :withCredentials="withCredentials"
  :show-file-list="showFileList"
  :on-success="handleSuccess"
  :on-error="handleError"
  :on-progress="handleProgress"
  :on-remove="handleRemove"
>
  <el-button slot="trigger" type="primary">选择文件</el-button>
</el-upload>

script

import { ElMessage } from 'element-plus'

export default {
  props: {
    // 上传地址
    uploadUrl: {
      type: String,
      required: true
    },
    // 请求头
    headers: {
      type: Object,
      default: () => {}
    },
    // 是否允许同时上传多个文件
    multiple: {
      type: Boolean,
      default: false
    },
    // 上传文件的数据
    data: {
      type: Object,
      default: () => {}
    },
    // 上传文件名称
    name: {
      type: String,
      default: 'file'
    },
    // 是否允许携带凭证
    withCredentials: {
      type: Boolean,
      default: false
    },
    // 是否显示上传列表
    showFileList: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    // 上传成功回调
    handleSuccess(response, file, fileList) {
      ElMessage.success('文件上传成功')
    },
    // 上传失败回调
    handleError(err, file, fileList) {
      ElMessage.error('文件上传失败')
    },
    // 上传进度回调
    handleProgress(event, file, fileList) {
      // event.percent 代表上传进度百分比
    },
    // 移除文件回调
    handleRemove(file, fileList) {
      // file 代表被移除的文件
    }
  }
}

踩坑分享

1. 文件上传类型限制

   在使用el-upload组件进行文件上传时，需要特别注意文件上传类型限制。默认情况下，el-upload组件只允许上传图片、视频和音频文件。如果需要上传其他类型文件，需要在el-upload组件的accept属性中指定允许上传的文件类型。

2. 文件大小限制

   el-upload组件还对文件大小进行了限制。默认情况下，el-upload组件只允许上传不超过2MB的文件。如果需要上传更大尺寸的文件，需要在el-upload组件的size属性中指定允许上传的文件大小。

3. 跨域问题

   在使用el-upload组件进行文件上传时，如果上传地址与当前页面不在同一个域下，则可能会遇到跨域问题。要解决跨域问题，需要在el-upload组件的withCredentials属性中设置true。

4. 安全问题

   在使用el-upload组件进行文件上传时，需要特别注意安全问题。在上传文件之前，需要对文件进行安全检查，以防止恶意文件上传到服务器。

5. 性能优化

   在使用el-upload组件进行文件上传时，需要特别注意性能优化。如果需要上传大量文件，则可以使用分块上传的方式来提高上传速度。