Индикатор выполнения для загрузки суперагента

Я использую следующие коды для загрузки файлов. Файл будет отправлен через суперагент в формате BLOB-объекта, преобразован в dataURI, когда достигнет сервера, и сохранится в AWS S3.

files.forEach((file) => {
  superagent.post('http://localhost:3030/uploads')
  .attach('file', file)
  .on('progress', e => {
    console.log('Percentage done: ', e);
  })
  .end((err, res) => {
    // console.log(err);
    console.log(res);
  });
});

Загрузка файла работает, но индикатор выполнения заполнен неправильно.

1

Как видно на скриншоте, вы можете видеть, что процент загрузки ProgressEvent очень быстро закончился и составил 100%, поскольку веб-интерфейс и серверная часть размещены на одном сервере.

Процесс загрузки продолжался в фоновом режиме, но направление стало "загрузка" вместо "загрузка" с 14:14:08 до 14:14:14 и завершено с ответом.

Я не смог рассчитать прогресс, основываясь на "итоговой загрузке", потому что во время "загрузки" итоговое значение равно 0.

2

Попробовал заменить суперагент на axios и попал в ту же проблему.

files.forEach((file) => {
  const url = 'http://localhost:3030/uploads';
  const formData = new FormData();
  const config = {
    headers: {
      'content-type': 'multipart/form-data'
    },
    onUploadProgress: e => {
      console.log('Upload: ', e);
    },
    onDownloadProgress: e => {
      console.log('Download: ', e);
    }
  };
  formData.append('file', file);
  axios.post(url, formData, config)
    .then(res => console.log(res))
    .catch(err => console.log(err));
});

Как я мог построить индикатор выполнения из этого? Можно ли сделать вывод, что "загрузка" - это процесс загрузки на сервер, а "загрузка" - это процесс загрузки в AWS?

Источник

1 ответ

Сегодня я столкнулся с этой проблемой (поэтому я пишу в этой теме...) Документы https://visionmedia.github.io/superagent/ четко говорит, что

событие - это направление: "загрузить" или "скачать"

Так что ИМХО нужно сделать что-то вроде:

        if(event.direction === "upload")
            console.log(e.direction,"is done",e.percent,"%")})

и это работает, так что можете установить setState() для индикатора выполнения здесь. Это очень глупо, но хорошо. https://visionmedia.github.io/superagent/docs/test.html также здесь они используют это. У кого-нибудь есть идея получше?

Источник

Не думаю, что это ошибка. Вот как он на самом деле построен, помните, что после отправки запроса на сервер должен быть ответ, так что где этоdownload направление исходит (как при загрузке данных с сервера в качестве данных ответа).

Источник
Другие вопросы по тегам