Прогресс загрузки файлов с огромным

Question

Я использую node.js -экспресс-бэкэнд с огромным пакетом. Я попытался реализовать индикатор выполнения и решил использовать грозные & websockets:

const create = (req, res, io) => {
  logger.debug(`EXEC create material`)
  const form = new formidable.IncomingForm()
  form.encoding = 'utf-8'
  form.keepExtensions = true
  form.multiples = true
  form.maxFileSize = 600 * 1024 * 1024 // 600MB instead of 200MB (default value)
  // form.uploadDir = `${__dirname}/uploads`
  let oldValue = 0
  form.on('progress', (bytesReceived, bytesExpected) => {
    let currentValue = (parseFloat(bytesReceived) / parseFloat(bytesExpected)) * 100
    if ((currentValue - oldValue) > 1 || currentValue === 100) {
      oldValue = currentValue
      io.emit('FILE_UPLOAD_STATUS', currentValue)
      console.log('FILE_UPLOAD_STATUS', currentValue)
    }
  })
...

Однако, похоже, обрабатывать файлы и показывать прогресс после загрузки всех файлов? Файлы могут быть довольно большими, поэтому я вижу индикатор выполнения пустым в браузере до конца, когда он за действительно короткий промежуток времени превращается из 0% в 100%.

Должен ли я изменить свой код и получить прогресс из запроса xhr?

Answer 1

Наконец я решил переместить его в js внутри браузера. Использование топора ios - самый простой и быстрый способ справиться с прогрессом. Это мой код в случае интереса (приложение React):

axios.request({
      method: "POST",
      url: `${PRIVATE_API_ROOT}/materials`,
      data: formData,
      headers: { Authorization: `Bearer ${token}` },
      onUploadProgress: ProgressEvent => {
        this.setState({
          progressStatus: parseFloat(ProgressEvent.loaded / ProgressEvent.total * 100).toFixed(2),
        })
      }
    }).then(data => {
      this.setState({
        progressStatus: 100,
        loading: false,
        error: ''
      })
    }).catch(function (error) {
      //handle error
      this.setState({ error: error.message })
    });
```