文件输入不存储文件信息，只存储名称

Question

我正在使用 redux-form@8.1.0 和 redux@4.0.1 并将数据保存在 MongoDB 集合中。但是，当我查看上传到 Mongo DB 集合中的文件对象时，它只会检索文件的名称。

FileInput.js 是我传递给 redux-form Field 组件的组件

FileInput.js

import React from 'react';

const handleChange = (handler) => ({target: {files}}) =>
  handler(files.length ? {file: files[0], name: files[0].name} : {});

export default ({
  input: {onChange, onBlur, value: omitValue, ...inputProps},
  meta: omitMeta,
  ...props
}) => (
  <input type="file"
    onChange={handleChange(onChange)} onBlur={handleChange(onBlur)}
    {...inputProps} {...props} />
);

这就是我在表单中使用它的方式

...
import FileInput from './FileInput';
...
<Field name="fileUploaded" component={FileInput} type="file" 
  />

这是 MongoDB 集合中的文档

{...
"fileUploaded":{"name":"testingfile.png"},
...}

它似乎只存储文件的名称，我希望另一个键值对与文件 information/object 以便稍后加载和显示此 image/file。

Answer 1

Redux-Form存储文件，也许你需要把它读出来然后作为multipart/form-data发送。数据应该可以在 state.form.myFormNameHere.values.mFieldNameHere.

访问

我制作了一个可能有用的 ImageDisplay 组件。它从红色格式的文件输入中读取文件并显示预览。

const ImageReader = ({ file }) => {
    const reader = new FileReader();
    const [imageUrl, setImageUrl] = useState('');
    if (file && file.file instanceof Blob) {
        reader.onload = (event) => {
            const { target: { result } } = event;
            setImageUrl(result);
        };
        reader.readAsDataURL(file.file);
        return <Image src={imageUrl} />;
    }
    return <Image src={null} />;
};

ImageReader.defaultProps = {
    file: null,
};

ImageReader.propTypes = {
    file: PropTypes.shape({
        name: PropTypes.string,
        file: PropTypes.any,
    }),
};

文件输入不存储文件信息，只存储名称

File Input doesn't store file information, just the name

javascript

file-io

reactjs

redux-form

FileInput.js

这是 MongoDB 集合中的文档