使用antd的Upload组件上传图片至腾讯云对象存储,Upload的action怎么写?

问题描述

antd文档中对Upload组件的action的描述:
action 必选参数, 上传的地址 string|(file) => Promise 默认值:无
腾讯云存储是通过创建cos实例,调用putObject方法实现上传。
但是如果Upload组件的action不写则会报错,写成其他地址
如果action 直接写腾讯云存储的路径比如http://xxx-xxxxxxxxxx.cos.ap-...
也会报400 badrequest,response返回值为:
<?xml version='1.0' encoding='utf-8' ?>
<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>
虽然通过cos的putObject把文件上传至腾讯云,但Upload组件中默认的上传动画总是会给用户错觉,它的上传进度会因为错误的action马上变红,但实际文件还在上传到腾讯云的过程中。

问题出现的环境背景及自己尝试过哪些方法

现在可以在cos的上传方法回调函数中拿到上传百分比,通过antd的Progress组件显示出来,但Upload本身的动画不知道怎么处理

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

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://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.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);

你期待的结果是什么?实际看到的错误信息又是什么?

1.怎么处理action,可以让upload的上传进度和真实上传进度一致?
2.如果不使用Upload的上传进度,能否屏蔽他默认的动画效果?

阅读 8.5k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题