react里antd-mobile里面的文件上传和删除

在React项目中使用antd-mobile组件库进行开发时，文件上传和删除操作可以通过其提供的`Upload`组件和相应的事件处理来实现。

1. 文件上传：使用`Upload`组件可以方便地实现文件的上传功能。组件提供了`beforeUpload`、`onUpload`和`onError`等事件，可以在文件上传前进行校验、上传过程中获取状态以及上传出错时进行处理。

2. 文件删除：虽然`Upload`组件本身不提供删除功能，但可以通过其他方式实现。一种常见的方式是在`Upload`组件的子元素中添加删除按钮，并通过状态控制文件列表的显示。当点击删除按钮时，可以从文件列表状态中移除对应的文件数据，从而实现删除操作。

示例代码：

import { Upload, Icon } from 'antd-mobile';

class MyComponent extends React.Component {
  state = {
    fileList: [],
  };

  handleUpload = (file) => {
    // 处理文件上传逻辑
    console.log('开始上传', file);
  };

  handleDelete = (file) => {
    // 删除文件列表中的文件
    const newList = this.state.fileList.filter(item => item.uid !== file.uid);
    this.setState({ fileList: newList });
  };

  render() {
    const { fileList } = this.state;
    const uploadProps = {
      action: 'http://example.com/upload', // 上传地址
      beforeUpload: (file) => {
        // 可以在此进行文件类型和大小的校验
        return true;
      },
      onChange(info) {
        // 上传状态发生变化时触发
        const { status } = info.file;
        if (status !== 'uploading') {
          console.log('上传完成', info.file);
        }
        if (status === 'done') {
          this.handleUpload(info.file);
        } else if (status === 'error') {
          this.handleUploadError(info.file);
        }
      },
    };

    return (
      <Upload {...uploadProps}>
        <div>
          <Icon type="plus" />
          <p>点击或拖拽文件到这里上传</p>
        </div>
      </Upload>
      <ul>
        {fileList.map((file) => (
          <li key={file.uid}>
            {file.name}
            <Icon type="delete" onClick={() => this.handleDelete(file)} />
          </li>
        ))}
      </ul>
    );
  }
}

在上述代码中，`Upload`组件用于实现上传功能，每个上传的文件都会被添加到`fileList`状态中。通过在文件列表中为每个文件项添加一个删除按钮，并绑定`handleDelete`方法，点击按钮时可以从`fileList`中移除对应的文件，从而实现删除操作。