Element React 上传组件(Upload)完全指南

概述

Element React 的 Upload 组件是一个功能强大的文件上传解决方案，提供了多种上传方式和丰富的自定义选项。本文将全面介绍该组件的使用方法和最佳实践。

基础用法

点击上传

最基本的文件上传方式是通过点击按钮触发文件选择对话框：

<Upload
  action="上传地址"
  onRemove={(file, fileList) => console.log(file, fileList)}
>
  <Button>点击上传</Button>
</Upload>

• action 属性指定文件上传的服务器地址
• 可以通过 onRemove 回调处理文件删除事件

拖拽上传

组件支持拖拽上传模式，只需添加 drag 属性：

<Upload
  drag
  action="上传地址"
  multiple
>
  <i className="el-icon-upload"></i>
  <div>将文件拖到此处，或<em>点击上传</em></div>
</Upload>

• multiple 属性允许一次选择多个文件
• 拖拽区域可以自定义图标和提示文字

进阶功能

文件限制

通过 beforeUpload 钩子函数可以实现上传前的文件校验：

beforeAvatarUpload(file) {
  const isJPG = file.type === 'image/jpeg';
  const isLt2M = file.size / 1024 / 1024 < 2;
  
  if (!isJPG) {
    Message.error('上传头像图片只能是 JPG 格式!');
  }
  if (!isLt2M) {
    Message.error('上传头像图片大小不能超过 2MB!');
  }
  return isJPG && isLt2M;
}

文件列表控制

组件提供了多种文件列表展示方式：

1. 文本列表 (默认)
2. 图片缩略图 (listType="picture")
3. 照片墙 (listType="picture-card")
4. 头像上传 (特殊场景)

<Upload
  listType="picture-card"
  onPreview={this.handlePreview}
>
  <i className="el-icon-plus"></i>
</Upload>

手动上传

设置 autoUpload={false} 可以禁用自动上传，通过 ref 手动控制上传过程：

<Upload
  ref="upload"
  autoUpload={false}
>
  <Button>选取文件</Button>
  <Button onClick={this.submitUpload}>手动上传</Button>
</Upload>

submitUpload() {
  this.refs.upload.submit();
}

实用技巧

1. 文件数量限制：使用 limit 属性限制上传文件数量，配合 onExceed 回调处理超额情况

2. 自定义请求：通过 httpRequest 属性可以完全覆盖默认的上传实现

3. 上传进度：onProgress 回调可用于实现上传进度条

4. 文件预览：onPreview 回调允许自定义文件预览逻辑

属性详解

最佳实践

1. 对于图片上传，建议使用 beforeUpload 进行格式和大小校验
2. 大文件上传应考虑分片上传策略
3. 敏感文件上传应启用 withCredentials
4. 多文件上传时合理设置 limit 防止服务器过载

通过合理配置 Element React 的 Upload 组件，可以满足绝大多数文件上传场景的需求，同时保持优秀的用户体验。