2

我正在准备一个表单，其中包含允许用户发布他的图片和关于她/他（自己）的视频的字段。为了发布图片，我准备了一个基于输入类型文件的组件，但是为了上传视频，我使用了 React Dropzone。现在我想将它保存到 redux，但是当我尝试这样做时，redux 抱怨它是不可序列化的项目，当我将它放入 JSON.Stringify() 时，redux 得到一个空对象。什么是最佳解决方案，我必须将它存储在某个状态，如果它是在表单的此步骤中创建的本地状态（幸运的是它是最后一个）但是如果用户想返回任何先前的步骤并返回此数据将丢失

请指教，dropzone 组件在下面，onResult只是一个处理程序，它获取值并将操作调度到 redux

import React, { useCallback, useState } from "react";
import { useDropzone } from "react-dropzone";

export const FileDropzone = ({ onResult, fileTypes, maxFiles }) => {
    const [progress, setProgress] = useState(0);
    const [error, setError] = useState(false);

    const onDrop = useCallback(acceptedFiles => {
        acceptedFiles.forEach(file => {
            const reader = new FileReader();
            reader.onerror = () => setError(true);
            reader.onprogress = data => {
                if (data.lengthComputable) {
                    var progress = parseInt(
                        (data.loaded / data.total) * 100,
                        10
                    );
                    setProgress(progress);
                }
            };
            reader.onloadend = () => onResult(reader.result);
            reader.readAsArrayBuffer(file);
        });
    }, []);
    const { getRootProps, getInputProps } = useDropzone({
        onDrop,
        maxFiles,
        accept: fileTypes
    });

    return (
        <>
            <div
                className={`border border-${
                    error ? "danger" : "light"
                } rounded d-flex justify-content-center align-items-center hpx-100`}
                {...getRootProps()}
            >
                <input {...getInputProps()} />
                <p>Proszę kliknąć, lub upuścić wybrany plik.</p>
            </div>
            <div
                className="bg-primary hpx-20 mt-1"
                style={{ width: `${progress}%` }}
            ></div>
        </>
    );
};

谢谢

4

1 回答 1

1

我认为您最好的选择是将文件转换为 Base64。

请检查如何在 JavaScript 中将文件转换为 base64？

和

https://github.com/reduxjs/redux/issues/2276

于 2021-10-07T21:48:44.010 回答