Как использовать «Image-Compressor» этот плагин в моем коде загрузки изображений? - PullRequest
Новая
       71

Как использовать «Image-Compressor» этот плагин в моем коде загрузки изображений?

1 голос
/ 17 января 2020

Я создал этот файл, используя компонент загрузки antd. Я хочу, чтобы при загрузке изображения оно сжимало размер и качество, максимальный размер составлял 2 Мб и отправляло на сервер. Я нашел плагин, но я не знаю, как его использовать. Можете ли вы помочь мне решить эту проблему?

Вот мой код:

Я создал компонент класса: 

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>
    );
  }
}
...