Ant Design + React实现手动上传文件、限定上传张数、支持请求自定义和图片原地更换

1. 安装依赖

npm install antd react-cropperjs --save

2. 导入必要的模块

import React, { useState } from 'react';
import { Upload, Button, message } from 'antd';
import Cropper from 'react-cropperjs';
import 'cropperjs/dist/cropper.css';

3. 定义组件

const App = () => {
  const [fileList, setFileList] = useState([]);
  const [croppedImage, setCroppedImage] = useState(null);

  const onCrop = () => {
    const image = cropper.getCroppedCanvas().toDataURL();
    setCroppedImage(image);
  };

  const onUpload = (file) => {
    const reader = new FileReader();
    reader.onload = () => {
      setFileList([file]);
      setCroppedImage(reader.result);
    };
    reader.readAsDataURL(file);
  };

  return (
    <div>
      <Upload
        accept="image/*"
        fileList={fileList}
        beforeUpload={onUpload}
        onRemove={() => setFileList([])}
        maxCount={1}
      >
        <Button>上传图片</Button>
      </Upload>
      {croppedImage && (
        <Cropper
          src={croppedImage}
          style={{ width: 300, height: 300 }}
          onCrop={onCrop}
        />
      )}
    </div>
  );
};

export default App;

4. 运行组件

ReactDOM.render(<App />, document.getElementById('root'));

5. 使用说明

• 组件提供了一个上传按钮，点击按钮可以打开文件选择器，选择图片上传。
• 上传的图片会显示在组件下方。
• 点击图片可以打开裁剪器，对图片进行裁剪。
• 裁剪完成后，点击裁剪按钮，即可保存裁剪后的图片。

6. 结语

本文介绍了如何使用Ant Design和React构建一个手动上传文件组件，该组件具有限制上传文件数量、自定义上传请求以及支持图片原地更换等特性。希望本文对您有所帮助。