我已使用antd上传组件创建了此文件。我希望当我上传图像时,它应该压缩大小并且质量最大大小为2mb并发送到后端。我已经找到了插件,但我不知道如何使用它。您能帮我解决这个问题吗?
这是我的代码:
我创建了类组件:
class Upload extends React.Component {
state = {
fileList: []
};
handleImageUpload = ({ onSuccess,onError,file }) => {
let formData = new FormData();
formData.set("documentId","");
formData.append("image",file);
console.log(base_url);
axios .post(`${base_url}/uploadImage`,formData,{
headers: {
"Content-Type": "multipart/form-data"
}
})
.then(res => {
console.log(res);
onSuccess();
this.props.form.setfieldValue(this.props.field.name,res.data);
})
.catch(err => {
console.log(err);
onError();
});
};
handleChange = ({ fileList }) => this.setState({ fileList });
render() {
const { fileList } = this.state;
const uploadButton = (
<div>
<Icon type="plus" />
<div classname="ant-upload-text" style={{ color: "black" }}>
Upload
</div>
</div>
);
const uploadedImage = (
<img
src={`${base_url}/viewImage`}
alt=""
/>
);
return (
<div classname="clearfix">
<MyUpload
customRequest={this.handleImageUpload}
listType="picture-card"
fileList={fileList}
// onPreview={this.handlePreview}
onChange={this.handleChange}
>
{userDetails.imageId ? uploadedImage : uploadButton}
</MyUpload>
</div>
);
}
}