将文件从状态添加到 Firestore 集合 Firestore Firebase ReactJs答案

【问题标题】：add file from state to firestore collection Firestore Firebase ReactJs将文件从状态添加到 Firestore 集合 Firestore Firebase ReactJs
【发布时间】：2018-11-26 19:16:23
【问题描述】：

我有 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：使用无效数据调用函数 DocumentReference.set()。不支持的字段值：自定义文件对象（在字段文件中找到）”

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

【问题讨论】：

标签： reactjs firebase react-redux-firebase

【解决方案1】：

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

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

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

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

【讨论】：