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

Question

>我有操作组件，我正在向firestore.collection添加新projects

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，但我需要从状态(title，content和file)中添加firestore.collection所有内容

Answer 1

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

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

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

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