Как ждать загрузки файла с помощью Axios - PullRequest
Новая
       22

Как ждать загрузки файла с помощью Axios

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

Я работаю над проектом Reactjs, где я могу загружать и скачивать файлы.

Но когда я загружаю файл, запрос PUT от Ax ios завершается до полной загрузки файла в мою базу данных. Я использую onUploadProgress от Ax ios, и он показывает сразу 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);
      });
  }

Ответы [ 2 ]

0 голосов
/ 17 февраля 2020

Вы устанавливаете состояние, как только вы нажимаете API, причина, по которой вы получаете 100%, как только API срабатывает. Я бы посоветовал вам передать "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);
      });
  }
0 голосов
/ 17 февраля 2020 
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);
  });

}

...