如何在我的图片上传代码中使用“ Image-Compressor”此插件?

我已使用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>
    );
  }
}
karl9413 回答:如何在我的图片上传代码中使用“ Image-Compressor”此插件?

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/2753125.html

大家都在问