使用cloudinary在React-Dropzone镜像上传中更改文件名

import React from 'react';
import Dropzone from 'react-dropzone';
import { Image } from 'cloudinary-react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      uploadedFile: null,
      uploadedFileName: ''
    };
  }

  onDrop = (acceptedFiles) => {
    const file = acceptedFiles[0];
    this.setState({
      uploadedFile: file,
      uploadedFileName: file.name
    });
  }

  render() {
    return (
      <div>
        <Dropzone onDrop={this.onDrop}>
          {({ getRootProps, getInputProps }) => (
            <div {...getRootProps()}>
              <input {...getInputProps()} />
              <p>拖放文件到此处，或点击选择文件上传。</p>
            </div>
          )}
        </Dropzone>
        {this.state.uploadedFile && (
          <div>
            <p>已上传文件名：{this.state.uploadedFileName}</p>
            <Image cloudName="your_cloud_name" publicId={this.state.uploadedFileName} />
          </div>
        )}
      </div>
    );
  }
}