arrays - 无法将文件放入 redux 数组

Question

我正在 redux 数组中上传文件，它似乎正在获取文件作为有效负载，因为它登录控制台但是当我将它推送到数组时，它会放置空对象而不是实际文件，我没有遇到这个问题，所以我不知道是什么这样做是代码:

const uploadImage = (e) => {
  const files = e.target.files;
  console.log(files)
  for(const file of Array.from(files)){
     console.log(file)
     dispatch({
       type: UPLOAD_IMAGE,
       payload: file
     });
  };
};

reducer :

case UPLOAD_IMAGE:
  console.log(action.payload)
  return {
    ...state,
    images: [...state.images, action.payload]
  }

这是有效载荷



这是 redux devtools 扩展

Answer 1

您必须为 Redux 创建新对象首先。
我不知道细节，但把File/Blob至 Redux与 JS 对象的工作方式不同。如果您有更好的解决方案，请与我分享)

    const file = document.querySelector<HTMLInputElement>(`#file`);
    const blob = file.files[0];
    const blobForRedux = {};

    [
        'lastModified',
        'lastModifiedDate',
        'name',
        'path',
        'preview',
        'size',
        'type',
        'webkitRelativePath',
    ].map((key) => {
        blobForRedux[key] = blob[key];
    });