技高一筹！轻松上手Antd上传组件实现手动上传文件

2023-12-30 20:26:35

掌握Antd上传组件的精髓，解锁手动上传文件的奥秘

Antd上传组件是React中一个功能强大的文件上传组件，它可以帮助您轻松实现文件上传功能。默认情况下，当您将文件拖拽到上传区域或点击上传按钮时，文件会自动上传到服务器。但是，在某些情况下，您可能需要禁止默认自动上传操作，并通过手动点击“确认”按钮来触发上传。

实现手动上传文件的详细步骤

导入Antd上传组件

import { Upload } from 'antd';

禁用默认自动上传

<Upload
  action="/upload.do"
  listType="picture"
  defaultFileList={[]}
  autoUpload={false}
>
  <Button icon={<UploadOutlined />}>点击上传</Button>
</Upload>

添加“确认”按钮

<Upload
  action="/upload.do"
  listType="picture"
  defaultFileList={[]}
  autoUpload={false}
>
  <Button icon={<UploadOutlined />}>选择文件</Button>
  <Button type="primary" onClick={this.handleUpload}>确认上传</Button>
</Upload>

编写处理函数

handleUpload = () => {
  const { fileList } = this.state;
  const formData = new FormData();
  fileList.forEach((file) => {
    formData.append('files[]', file);
  });

  axios.post('/upload.do', formData)
    .then((response) => {
      console.log('上传成功');
    })
    .catch((error) => {
      console.log('上传失败');
    });
};

绑定“确认”按钮的点击事件

<Upload
  action="/upload.do"
  listType="picture"
  defaultFileList={[]}
  autoUpload={false}
>
  <Button icon={<UploadOutlined />}>选择文件</Button>
  <Button type="primary" onClick={this.handleUpload}>确认上传</Button>
</Upload>