如何使用 React (Next) / Redux / Saga 发送多部分表单数据？答案

【问题标题】：How to send multipart form data with React (Next) / Redux / Saga?如何使用 React (Next) / Redux / Saga 发送多部分表单数据？
【发布时间】：2022-07-31 18:17:14
【问题描述】：

我正在使用通常的 React Saga 和 Next.js 发送 img 文件。我从来没有处理过发送多部分表单数据，所以我不知道该怎么做。我通常以base64格式发送图片。

这是用户界面部分：

const onUploadLogo = (e) => {
  var img = e.target.files[0]
  let formData = new FormData()
  formData.append("file", img)
  console.log('image check => ', img)
  console.log('formData check => ', formData)
  updateLogoFunc({ // this is the API call
    formData // body
  })
}

<label className="custom-file-upload">
  <input type="file" onChange={onUploadLogo} accept="image/*" />
  Attach
</label>

在'image check => ' 中，我看到我的图片已上传，我看到了文件，但是'formData check => ' 给了我undefined。仅供参考，API 的传奇调用工作得很好，没问题。如果需要saga的代码：

export function* updateLogoSaga(action) {
  try {
    yield put(setLoader(true))
    const response = yield ApiStore.garage.post(`UpdateLogo`, action.values)
    yield put(setLoader(false))
  } catch (error) {
    yield put(setLoader(false))
  }
}

我的问题是我不知道如何通过 POST 调用以multipart form data 发送这个该死的图像。

【问题讨论】：

你是如何在后台处理这篇文章的？
@Yilmaz 我不知道我只做前端部分。他们刚刚给我发了 Swagger，上面写着我需要以多部分形式数据发送正文。
什么是formData check => 和image check =>
@Yilmaz 它是我提供的代码中的 console.log()。

标签： reactjs next.js multipartform-data redux-saga saga

【解决方案1】：

    var img = e.target.files[0]
    const formData = new FormData();
    formData.append("file", img);

【讨论】：