问题描述
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的上传进度,能否屏蔽他默认的动画效果?