时间戳

首页 > 解决方案 > 将文件从状态添加到 Firestore 集合 Firestore Firebase ReactJs

reactjs - 将文件从状态添加到 Firestore 集合 Firestore Firebase ReactJs

问题描述

我有 Action 组件，我在其中添加新projects组件firestore.collection 

 export const createProject = (project) => {
      return (dispatch, getState, { getFirebase, getFirestore }) => {

            const firestore = getFirestore();

            firestore.collection('projects').add({
                ...project

            }).then(() => {
                dispatch({})
            }).catch((err) => {
                dispatch({});
            })
        }
    };

我有组件：

state = {
      title: '',
      content: '',
      file: ''
    }
    handleChange = (e) => {
        this.setState({
            [e.target.id] : e.target.value
        })
    }
    handleOnFileChange = (e) => {
        let file = e.target.files[0];
        this.setState({
            [e.target.id] : file
        })
    }
    handleSubmit = (e) => {
       e.preventDefault();
       console.log(this.state)
    }



    <form onSubmit={this.handleSubmit}>

       <input type="text" id="title" onChange={this.handleOnFileChange}/>

       <textarea id="content" onChange={this.handleChange}></textarea>

       <input type="file" id="file" onChange={this.handleChange}/>

    </form>

const mapDispatchToProps = (dispatch) => {
    return {
        createProject: (project) => dispatch(createProject(project)) 
    }
}

提交后我收到此错误：דFirebaseError: Function DocumentReference.set() called with invalid data. Unsupported field value: a custom File object (found in field file)”

file如果我从中删除state，并尝试进入add该状态，没有file，一切正常，我的项目正在添加firestore.collection，但我需要firestore.collection从状态（title和content）file添加到所有内容

标签： reactjsfirebasereact-redux-firebase

解决方案

如果我没记错的话，这是因为您尝试将不支持的File类型的对象保存到 Firestore。请参阅此处支持的数据类型https://firebase.google.com/docs/firestore/manage-data/data-types。

因此，您可以使用 File 对象的一个​​属性（或多个属性），例如名称、大小或类型。

或者您修改代码以将文件保存到 Cloud Storage for Firebase，这是用于存储和提供文件的专用 Firebase 服务，请参阅https://firebase.google.com/docs/storage/

这完全取决于您的确切需求：保存文件或仅保存其某些属性。

推荐阅读