reactjs - Redux-saga上传文件进度事件

Question

我正在使用 redux-saga 上传文件，并且我正在尝试找到一种方法来在上传进度发生变化时调度事件:

const data = new FormData();

data.append('file', fileWrapper.file);

const uploadedFile = yield call(request, requestURL, {
  method: 'POST',
  headers: {
     'X-Requested-With': 'XMLHttpRequest'
  },
  body: data
});

知道如何附加上传进度事件吗？

Answer 1

首先，答案取决于你如何进行uploadRequest。

您似乎正在使用 window.fetch API。此 API 不向您提供接收上传进度事件的方法。

因此，您需要改用 XMLHttpRequest 或以方便的方式包装它的库。我建议您查看axios和 superagent 。它们都提供了一种监听进度事件的方法。

下一个主题是如何在 redux-saga 中分派(dispatch)进度操作。您需要使用 fork 创建 fork 的异步任务并在那里分派(dispatch)操作。

function uploadEmitter(action) {
  return eventChannel(emit => {
     superagent
       .post('/api/file')
       .send(action.data)
       .on('progress', function(e) {
           emit(e);
       });
  });
}

function* progressListener(chan) {
  while (true) {
    const data = yield take(chan)
    yield put({ type: 'PROGRESS', payload: data })
  }
}

function* uploadSaga(action) {
  const emitter = uploadEmitter()
  yield fork(progressListener, emitter)
  const result = yield call(identity(promise))
  yield put({ type: 'SUCCESS', payload: result })
}

来源:https://github.com/redux-saga/redux-saga/issues/613#issuecomment-258384017

P.S. 在我个人看来，redux-saga 不是实现此类功能的合适工具。使用 redux-thunk 来做到这一点会更干净:

function uploadAction(file) {
  return dispatch => {
    superagent
      .post('/api/file')
      .send(action.data)
      .on('progress', function(event) {
           dispatch({type: 'UPLOAD_PROGRESS', event});
      })
      .end(function(res) {
           if(res.ok) {
              dispatch({type: 'UPLOAD_SUCCESS', res});
           } else {
              dispatch({type: 'UPLOAD_FAILURE', res});
           }
      });
  }
}