在Rest Framework或React放置区域上进行管理，将文件上传到Firebase时出现问题

Question

我正在使用众所周知的React Framework

https://marmelab.com/admin-on-rest/RestClients.html

现在我想将文件上传到Firebase，按照文档操作，找到一个很棒的上传组件

FileInput（FileInput允许使用react-dropzone上传一些文件。）

所以我在我的React应用程序中使用了它，下面是我的代码

export const PostCreate = (props) => (
    <Create {...props}>
        <SimpleForm>
            <ReferenceInput label="User" source="userId" reference="profiles" allowEmpty>
                <SelectInput optionText="name" />
            </ReferenceInput>
            <TextInput source="title" />
            <LongTextInput source="body" />


            <FileInput source="files" label="Related files" accept="video/*,audio/*, image/*, application/*" multiple={true} >
                <FileField source="src" title="title" />
            </FileInput>
        </SimpleForm>
     </Create>
);

对于Firebase交互，我正在使用

https://github.com/sidferreira/aor-firebase-client

当我看到Firebase控制台时，我看不到Firebase存储桶中的任何文件，但字段值保存正确。

“ blob：http：// localhost：3000 / 8daedcb8-e526-427b-aa0c-83ff7ce9deee ”

为了更好的主意，我附上了Firebase数据库和存储的快照

我是这个框架的新手，所以我知道我肯定错过了一些东西，但是我仍在寻找什么。

因此，请帮助我找到解决方案。

Answer 1

花了两天时间解决问题后，终于可以找到解决方案了，这确实很容易。一个简单的方法为我完成了工作。

首先，我创建了一种将文件上传到Firebase的方法

const upload = item => {
    return firebase.storage().ref().child("images/" + item.title).put(item.rawFile)
        .then((snapshot) => {
            // console.log('One success:', snapshot.downloadURL)
            return snapshot.downloadURL;
        }).catch((error) => {
            console.log('One failed:', item, error.message);
            return error;
        });
 }

然后我刚刚更新了我的API装饰器

addUploadFeature.js

用这种方法

const addUploadCapabilities = requestHandler => {
    return (type, resource, params) => {
        if (type === 'CREATE' && resource === 'posts') {
        // console.log("kgk");
            if (params.data.files && params.data.files.length) {
            // only freshly dropped pictures are instance of File
                console.log(params.data.files.length);
                const formerPictures = params.data.files.filter(
                    p => !(p.rawFile instanceof File)
                );
                const newPictures = params.data.files.filter(
                    function (p) {
                        // console.log(p);
                        const storageRef = firebase.storage().ref();

                        // const uploadTask = storageRef.child('images/' + p.title).put(p.rawFile);


                        return p.rawFile instanceof File;

                    }
                 );

                return Promise.all(newPictures.map(upload))
                    .then(function (base64Pictures) {
                          return base64Pictures.map(function (picture64) {
                                return ({
                                    src: picture64,
                                    title: `${params.data.title}`,
                                });
                            });
                        }
                    )
                     .then(function (transformedNewPictures) {
                             return requestHandler(type, resource, {
                                ...params,
                                data: {
                                    ...params.data,
                                    files: [
                                        ...transformedNewPictures,
                                        ...formerPictures,
                                    ],
                                },
                            });
                        }
                     );
            }
        }

        return requestHandler(type, resource, params);
    };
 };

那解决了我的问题。现在，我可以看到上传到Firebase存储的文件了。

这是我一直在寻找的数据库结构