如何等到使用 Axios 上传文件

Question

我正在开发一个可以上传和下载文件的 Reactjs 项目。

但是当我上传文件时，来自 Axios 的 PUT 请求在文件完全上传到我的数据库之前完成。 我使用 Axios 的 onUploadProgress，点击上传按钮后它直接显示 100%，而文件尚未上传。

似乎只有在进度条达到100％时才开始背面文件的上传。 我不知道如何正确同步进度条和文件上传。

我的代码

正面

  onUpload() {
    const data = new FormData();
    for (var i = 0; i < this.state.selectedFile.length; i++) {
      data.append("file", this.state.selectedFile[i]);
    }
    axios
      .put("http://localhost:5000/api/files/upload", data, {
        onUploadProgress: ProgressEvent => {
          this.setState({
            loaded: Math.round(
              (ProgressEvent.loaded * 100) / ProgressEvent.total
            )
          });
        }
      })
      .then(res => {
        console.log("File(s) uploaded", res);
      });
  }

返回

export const uploadFile = (req, res) => {
  const myFile = (Array.isArray(req.files.file)
    ? req.files.file
    : [req.files.file]
  ).filter(e => e);
  // upload file(s) to directory
  for (let i = 0; i < myFile.length; i++) {
    myFile[i].mv("./src/uploads/" + myFile[i].name, function(err) {
      if (err) {
        return res.status(500).send(err);
      }
    });
    // save file(s) to database
    Upload.create({
      type: myFile[i].mimetype,
      name: myFile[i].name,
      data: myFile[i].data
    });
  }
  res.send("file uploaded !");
};

顺便说一句，我使用https://www.npmjs.com/package/express-fileupload 进行文件上传

编辑

  onUpload() {
    const data = new FormData();
    for (var i = 0; i < this.state.selectedFile.length; i++) {
      data.append("file", this.state.selectedFile[i]);
    }
    axios
      .post("http://localhost:5000/api/files/upload", data, {
        headers: {
          "Content-type": "multipart/form-data"
        },
        onUploadProgress: ProgressEvent => {
          this.setState({
            loaded: Math.round(
              (ProgressEvent.loaded * 100) / ProgressEvent.total
            )
          });
        }
      })
      .then(res => {
        console.log("File(s) uploaded", res);
      });
  }

Answer 1

onUpload() {
const data = new FormData();
for (var i = 0; i < this.state.selectedFile.length; i++) {
  data.append("file", this.state.selectedFile[i]);
}
axios
  .post("http://localhost:5000/api/files/upload", data, {
    headers: {
      "Content-type": "multipart/form-data"
    },
    onUploadProgress: ProgressEvent => {
      this.setState({
        loaded: 95
      });
    }
  })
  .then(res => {
   this.setState({
        loaded: 100
      });
    console.log("File(s) uploaded", res);
  });

}

Answer 2

您在访问 API 时就设置状态，这就是您在 API 访问时获得 100% 的原因。我建议你从服务器端传递"status = success" 或"status = 201" 这样你就可以等待客户端的响应。即：-

onUpload() {
    const data = new FormData();
    for (var i = 0; i < this.state.selectedFile.length; i++) {
      data.append("file", this.state.selectedFile[i]);
    }
    axios
      .post("http://localhost:5000/api/files/upload", data, {
        headers: {
          "Content-type": "multipart/form-data"
        }
      })
      .then(res => {
        if(res.status === 'success') {
              onUploadProgress: ProgressEvent => {
               this.setState({
                 loaded: Math.round(
                (ProgressEvent.loaded * 100) / ProgressEvent.total
              )
           });
         }
        }
        console.log("File(s) uploaded", res);
      });
  }