Element React 文件上传组件(Upload)使用指南

概述

Element React 的 Upload 组件是一个功能强大的文件上传解决方案，支持点击上传、拖拽上传、图片预览等多种功能。本文将详细介绍该组件的各种使用场景和配置选项。

基础用法

点击上传文件

最基本的用法是通过按钮点击上传文件：

<Upload
  action="//your-upload-api"
  fileList={fileList}
  tip={<div>jpg/png 文件，大小不超过500kb</div>}
>
  <Button size="small" type="primary">点击上传</Button>
</Upload>

• action 属性指定上传的API地址
• fileList 用于显示已上传的文件列表
• tip 可以添加上传提示信息

头像上传

头像上传是常见的场景，通常需要对文件类型和大小进行限制：

<Upload
  className="avatar-uploader"
  action="//your-upload-api"
  showFileList={false}
  beforeUpload={this.beforeAvatarUpload}
>
  {imageUrl ? <img src={imageUrl} /> : <i className="el-icon-plus" />}
</Upload>

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;
}

进阶功能

照片墙模式

通过设置 listType="picture-card" 可以创建照片墙样式的上传组件：

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

拖拽上传

拖拽上传提供了更好的用户体验：

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

手动上传

设置 autoUpload={false} 可以手动控制上传时机：

<Upload
  ref="upload"
  action="//your-upload-api"
  autoUpload={false}
>
  <Button>选择文件</Button>
  <Button onClick={this.submitUpload}>上传到服务器</Button>
</Upload>

通过 ref 调用 submit 方法触发上传：

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

属性详解

事件钩子

Upload 组件提供了丰富的事件钩子：

• onPreview - 点击文件时触发
• onRemove - 移除文件时触发
• onSuccess - 上传成功时触发
• onError - 上传失败时触发
• onProgress - 上传进度变化时触发
• onChange - 文件状态改变时触发
• beforeUpload - 上传前触发，可阻止上传
• onExceed - 超出限制时触发

最佳实践

1. 文件验证：始终使用 beforeUpload 验证文件类型和大小
2. 进度反馈：使用 onProgress 提供上传进度反馈
3. 错误处理：实现 onError 处理上传失败情况
4. 限制上传数量：使用 limit 和 onExceed 控制上传数量
5. 自定义请求：通过 httpRequest 覆盖默认的上传行为

通过合理使用这些功能，可以构建出既美观又实用的文件上传体验。