React js使用react-dropzone上传文件xlsx

时间:2019-09-17 14:47:42

标签: javascript reactjs file-upload xlsx react-dropzone

我必须用react js加载我正在使用react-dropzone的xlsx类型的文件,但是我不明白我该如何以formData格式发送此文件。

我尝试使用邮递员在正文中设置表格数据,我上传了文件,然后可以正常工作。

但是我不明白我的反应哪里错了。

有人可以给我一些建议。

代码:

function Dropzone(props) {
  const { acceptedFiles, getRootProps, getInputProps } = useDropzone({
    onDrop: props.onDrop,
  });
  const file = acceptedFiles[0];
  return (
    <div>
      <div {...getRootProps({ className: 'drop-zone' })}>
        <input {...getInputProps()} multiple={false} />
        <p>
          Trascina qui per caricare il file e fai clic per selezionare i file:
          {file && (
            <span>
              {file.path} - {file.size} bytes
            </span>
          )}
        </p>
      </div>
    </div>
  );
}
....
<Dropzone onDrop={this.onDrop} multiple={false}
....
  onDrop(file) {
    console.log("File",file)
    API.upload(file).then(e => {
      NotificationManager.success("L'operazione è andata a buon fine.");
      console.error("UploadFile",e);
    }).catch(e => {
        NotificationManager.error("L'operazione non è andata a buon fine.");
        console.error("UploadFile",e);
      });
  }

Api服务:

export const upload = file => {
  let formData = new FormData();
  formData.append("file", file[0]);
  return fetch(`${apiEndpoint}/user`, {
    method: 'POST',
    headers: headers(),
    body: formData,
  })
  .then(checkAuth)
  .then(res => res.json());
}

0 个答案:

没有答案