前端使用Antd中Upload组件上传获取图片base64值

使用React实现文件Base64上传处理,

最新推荐文章于 2025-06-27 14:06:37 发布

原创最新推荐文章于 2025-06-27 14:06:37 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文介绍了如何在React组件中使用beforeUpload事件处理文件上传，包括使用FileReader读取文件并转化为Base64编码，以支持图片预览和上传功能。

直接上代码：

<Upload className="avatar-uploader" showUploadList={false} accept='image/*' beforeUpload={this.beforeUpload}>
  {base64
  ? <div>
    <img alt="example" style={{ width: '88%' }} src={base64} />
  </div>
  : <div style={{ textAlign: 'center' }}>
    <Icon type={isLoading ? 'loading' : 'plus' } />
    <div className="ant-upload-text">上传</div>
  </div>}
</Upload>

在beforeUpload事件中获取base64

beforeUpload = (file: any) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      const base64Str = reader.result;
      this.setState({ base64: base64Str })
      resolve({ base64: base64Str, name: file.name });
    };
    reader.onerror = (error) => reject(error);
  });
}