如何使用 react 和 redux 处理文件上传？答案

【问题标题】：How could I handle a file upload with react and redux?如何使用 react 和 redux 处理文件上传？
【发布时间】：2021-07-12 05:24:28
【问题描述】：

当我尝试在我的 react-redux 应用程序中实现文件上传器时遇到一些问题。到目前为止，我已经以这种方式处理了所有其他输入：

所有输入都有一个名称和一个值。当它们改变时，它们调用相同的函数。

这个函数派发一个动作，所以在组件的容器中，有：

onInputChange: (name, value) => {
  dispatch(inputValueChange(name, value));
}

这是动作创建者：

export const inputValueChange = (name, value) => ({
  type: INPUT_VALUE_CHANGE,
  name,
  value,
});

现在在reducer中，有一个case对应这个action：

case INPUT_VALUE_CHANGE:
  return {
    ...state,
    [action.name]: action.value,
  };

这适用于我所有的文本类型输入和选择元素。如果我使用相同的操作发送名称“图像”（对应于状态中元素的名称）并作为值 e.target.files[0]，我可以通过 console.log 看到预期的信息减速机。

See the image

但是状态没有更新，我不明白为什么。我怀疑这可能是因为我尝试更新实际上是一个对象的状态元素。但是这种方法适用于数组的状态元素。我试图给状态一个 null 的初始值。在这种情况下，状态被更新，图像是一个空对象。

那么我怎样才能正确更新我的状态呢？

之后，我将使用所有这些元素将数据发布到我的 API。我计划在调用 API 之前做以下事情：

const bodyFormData = new FormData();
bodyFormData.append('image', image);  //image is the object which I put in the state
// Then i will do a post request on /api/upload by giving it bodyFormData

这听起来好吗？

【问题讨论】：

标签： javascript reactjs redux file-upload

【解决方案1】：

我解决了我的问题。这很棘手。

解决方案是在我将 console.log(image) 还给组件时执行它。这将使我能够看到图像的信息是从 redux 状态提供给组件的。实际上，状态已正确更新，但 Redux Dev Tools 无法读取此类对象，因此它显示一个空对象，而该对象不是空的。

很高兴知道！

【讨论】：