Rest Framework 或 React 放置区的管理员，将文件上传到 Firebase 时出现问题

Question

我正在使用众所周知的 React 框架

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 存储的文件了。

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

Answer 2

首先，请注意admin-on-rest 不是CMS。这是一个可用于构建管理应用程序的 React 框架:)

其次，我们不假设您希望如何存储文件。这是您的restClient 的工作。您可以在文档中找到显示如何处理文件上传的示例：https://marmelab.com/admin-on-rest/RestClients.html#decorating-your-rest-client-example-of-file-upload