Я использую следующие коды для загрузки файлов. Файл будет отправлен через суперагент в формате 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?

2
Yen Sheng 21 Июл 2017 в 09:33
Вы не можете измерить это таким образом, возможно, попробуйте веб-сокеты, но перед этим прочтите stackoverflow.com/a/48412965/2805357 Следует прояснить, что здесь произошло.
 – 
djra
24 Янв 2018 в 03:27

2 ответа

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

событие - направление: «загрузить» или «загрузить»

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

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

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

1
Arogancky 30 Дек 2017 в 04:16
Для меня это имеет смысл, но по какой-то причине я получаю только 100%
 – 
Dmitriy
24 Мар 2020 в 17:36
Привет, спустя почти 3 года? : D Я заметил сообщение (не помню, где - здесь или в группе FB), где разработчик JS сказал, что нет элегантного способа сделать индикатор выполнения, чтобы вы могли попробовать создать свою собственную оболочку. Я больше не использую JS, извините! Но, конечно, вы можете предоставить здесь образец кода
 – 
Arogancky
25 Мар 2020 в 18:05
Я провел еще несколько исследований, и кажется, что процесс загрузки работает только в узле, а не в браузере.
 – 
Dmitriy
27 Мар 2020 в 13:07

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

0
Libby Lebyane 19 Апр 2020 в 18:46