带有 redux-saga 的 firebase "cannot read property 'split' of undefined"

Question

我在 Next.js

中将 firebase 与 redux-saga 结合使用

尝试在 firebase 存储中上传图像文件时遇到问题。

// saga
function* uploadImage(action) {
  try {
    const storage = storageService
    const ext = path.extname(action.data.src)
    const basename = path.basename(action.data.src, ext)
    const imageRef = 'images/' + basename + '_' + new Date().getTime() + ext   // images/sample_1629970096998.png
    const storageRef = storage.ref().child(imageRef)  

    const result = yield call(
      [storage, storageRef.put()],
      action.data.file,
    )

    yield put({
      type: UPLOAD_IMAGE_SUCCESS,
      data: result,
    })
  } catch(error) {
    yield put({
      type: UPLOAD_IMAGE_FAILURE,
      error: error.message,
    })
  }
}

上面的代码发送此错误消息： “调用：解压缩的 fn 参数（来自 [context, fn] 或 {context, fn}）不是函数”

如果我把那个代码改成这个。

function* uploadImage(action) {
  try {
    const storage = storageService
    const ext = path.extname(action.data.src)              // 확장자 추출
    const basename = path.basename(action.data.src, ext)   // 확장자 뺀 이름 추출
    const imageRef = 'images/' + basename + '_' + new Date().getTime() + ext   // images/sample_1629970096998.png

    const result = yield call(
      [storage, storage.ref().child().put()],
      imageRef,
      action.data.file,
    )

    yield put({
      type: UPLOAD_IMAGE_SUCCESS,
      data: result,
    })
  } catch(error) {
    yield put({
      type: UPLOAD_IMAGE_FAILURE,
      error: error.message,
    })
  }
}

它发送此错误：“无法读取未定义的属性 'split'”

我不知道如何传递两个参数。有人帮助我。

Answer 1

我通过这种方式在firestore上传图片成功了

function* uploadImage(action) {
  try {
    const storageRef = storageService.ref()

    const ext = path.extname(action.data.src)
    const basename = path.basename(action.data.src, ext)
    const imageRef = 'images/' + basename + '_' + new Date().getTime() + ext   // images/sample_1629970096998.png

    const childRef = yield call(
      [storageRef, storageRef.child],
      imageRef,
    )

    const result = yield call(
      [childRef, childRef.put],
      action.data.file,
    )
    
    yield put({
      type: UPLOAD_IMAGE_SUCCESS,
    })
    // yield put({
    //   type: DOWNLOAD_IMAGE,
    //   data: 이미지 다운로드
    // })
  } catch(error) {
    yield put({
      type: UPLOAD_IMAGE_FAILURE,
      error: error.message,
    })
  }
}

不过我好像没有什么好办法。有人有好主意吗？

带有 redux-saga 的 firebase "cannot read property 'split' of undefined"

firebase with redux-saga "cannot read property 'split' of undefined"

reactjs

firebase

google-cloud-firestore

redux-saga