Question

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

FileInput.js是我传递给redux形式的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"},
...}

似乎它只存储文件的名称，我希望具有文件信息/对象的另一个键值对，以便以后加载和显示此图像/文件。

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,
    }),
};

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

FileInput.js

这是MongoDB集合中的文档

1 个答案: