Использование customRequest при загрузке файла дизайна Ant - PullRequest
Новая
       14

Использование customRequest при загрузке файла дизайна Ant

0 голосов
/ 27 сентября 2019

Я использую Axios для обработки загрузки файла.Я столкнулся с проблемой, показывающей прогресс загрузки файла.Используемое представление загрузки файла: "picture-card".

HTML 

<Upload
  accept="image/*"
  customRequest={uploadImage}
  onChange={handleOnChange}
  listType="picture-card"
  fileList={defaultListOfFiles}
  className="image-upload-grid"
>
  {defaultListOfFiles.length >= 8 ? null : <div>Upload Button</div>}
</Upload>

OnChangeHandler 

const handleOnChange = ({ file, fileList, event }) => {
  console.log(file, fileList, event);
  //Using Hooks to update the state to the current filelist
  setDefaultFileList(fileList);
  //filelist - [{uid: "-1",url:'Some url to image'}]
};

Обработчик CustomRequest 

const uploadImage = options => {

  const { onSuccess, onError, file, onProgress } = options;

  const fmData = new FormData();
  const config = {
    headers: { "content-type": "multipart/form-data" },
    onUploadProgress: event => {
      console.log((event.loaded / event.total) * 100);
      onProgress({ percent: (event.loaded / event.total) * 100 },file);
    }
  };
  fmData.append("image", file);
  axios
    .post("http://localhost:4000/upload", fmData, config)
    .then(res => {
      onSuccess(file);
      console.log(res);
    })
    .catch(err=>{
      const error = new Error('Some error');
      onError({event:error});
    });
}
...