problem description

description of action of Upload component in antd document:
action required parameter, upload address string | (file) = > Promise default value: no
Tencent Cloud storage is uploaded by creating a cos instance and calling the putObject method.
but if the action of the Upload component is not written, the error will be reported as another address
if action directly writes the path stored by Tencent Cloud, such as http://xxx-xxxxxxxxxx.cos.ap-.
, it will also report a 400badrequest,response return value of

< Error >

<Code>MalformedPOSTRequest</Code>
<Message>The body of your POST request is not well-formed multipart/form-data.</Message>
<Resource>xxx-xxxxxxxxxx.cos.ap-beijing.myqcloud.com</Resource>
<RequestId>NWI2M2JjOGRfZDQyNzVkNjRfMjA3OF81YmI2ZDE=</RequestId>
<TraceId>OGVmYzZiMmQzYjA2OWNhODk0NTRkMTBiOWVmMDAxODc0OWRkZjk0ZDM1NmI1M2E2MTRlY2MzZDhmNmI5MWI1OTY4OGQ5OWY4YWFhNjAzOTkyNDJhZmQyOTk1YWVmOWFlNmRjYjM3OWQxODI2NjkxYTUyMWFhZDNhMGE4ZmQ3Yjk=</TraceId>

< / Error >
although the file is uploaded to Tencent Cloud through the putObject of cos, the default upload animation in the Upload component always gives users the wrong impression, and its upload progress will immediately turn red because of the wrong action, but the actual file is still in the process of uploading to Tencent Cloud.

the environmental background of the problems and what methods you have tried

now you can get the upload percentage from the callback function of the upload method in cos, which is displayed through the Progress component of antd, but the animation of Upload itself does not know how to deal with it

related codes

/ / Please paste the code text below (do not replace the code with pictures)

import { Upload, Icon, Modal } from "antd";

class PicturesWall extends React.Component {
  state = {
    previewVisible: false,
    previewImage: "",
    fileList: [{
      uid: -1,
      name: "xxx.png",
      status: "done",
      url: "https://img.codeshelper.com/upload/img/2021/04/02/1rsclebljpk14902.png",
    }],
  };

  handleCancel = () => this.setState({ previewVisible: false })

  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  }

  handleChange = ({ fileList }) => this.setState({ fileList })

  render() {
    const { previewVisible, previewImage, fileList } = this.state;
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">Upload</div>
      </div>
    );
    return (
      <div className="clearfix">
        <Upload
          action="//jsonplaceholder.typicode.com/posts/"
          listType="picture-card"
          fileList={fileList}
          onPreview={this.handlePreview}
          onChange={this.handleChange}
        >
          {fileList.length >= 3 ? null : uploadButton}
        </Upload>
        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" style={{ width: "100%" }} src={previewImage} />
        </Modal>
      </div>
    );
  }
}
ReactDOM.render(<PicturesWall />, mountNode);

what result do you expect? What is the error message actually seen?

1. How to deal with action, so that the upload progress of upload is the same as the actual upload progress?
2. If you don"t use Upload"s upload schedule, can you block his default animation effects?