Question

我想将图像存储在Firebase存储中，并在Firestore中传递其URL参考。因此，我可以在存储空间中上传图片，但无法在Cloud Firestore中传递图片网址引用。

import React , {Component} from 'react';
import fire from './../fire'
import Uploadimg from './Uploadimg'

class Adproduct extends Component{

  geturl = (imurl) =>{
      this.setState({
          img:imurl
        });
  }
  submit = e =>{
      e.preventDefault()
      var db= fire.firestore();

      db.settings({
        timestampsInSnapshots: true
           });

      db.collection('newproducts').add(this.State)
      .then(res =>{
          console.log(res.id)

          this.props.submit()
      })
      .catch(err =>{
          console.log('something went wrong',err)
      })
  }
  takedata = e =>{
      this.setState({
          [e.target.name]: e.target.value 
      });
  }

  constructor(props){
      super(props);
      this.state ={
          name:'',
          productdetails:'',
          size:'',

      }
  }

  render() {

      return (
          <div className="container w3-padding">

          <div className="row w3-padding">
          <div className="col-md-6 w3-padding">
                   <h3 className="w3-tag w3-padding w3-center">Add New</h3>
              <form className="w3-container" onSubmit={this.submit}>

                     <label className="w3-text-blue"><b>Name</b></label>
                <input className="w3-input w3-border" type="text" name="name" value={this.state.name} onChange={this.takedata} required/>

                <label className="w3-text-blue"><b>productdetails</b></label>
                <input className="w3-input w3-border" type="text" name="productdetails" value={this.state.productdetails} onChange={this.takedata} required/>

            <label className="w3-text-blue"><b>size available</b></label>
            <input className="w3-input w3-border" type="text" name="size" value={this.state.size} onChange={this.takedata} required/>


                   <br/>
                   <Uploadimg geturl={this.geturl} />
                   <br/>
                    <button className="w3-btn w3-blue">Add</button>

                 </form>
          </div>
          </div>
          </div>
      );
  }

}
export default Adproduct;

Answer 1

如果接受的答案对您没有帮助，则您可能遇到了与我相同的问题。

我通过使用打字稿传播运算符解决了这个问题：

add(wizard: Wizard): Promise<DocumentReference> {
return this.wizardCollection.add({...wizard});

}

希望这对您有所帮助。

Answer 2

使用

db.collection('newproducts').add({...this.State})

代替

db.collection('newproducts').add(this.State)

Answer 3

也可以，如果你忘了在项目中创建数据库发生... 它发生在我身上 - 我复制项目的密钥 - 却忘了在项目实际创建数据库....我创建了数据库之后 - 它解决了......

Answer 4

对我来说很简单。

进入数据库->规则->

更改允许读写，如果为false；变为真实；

Answer 5

您应该创建Firestore数据库，允许读取，写入规则，并将其配置到您的项目中。然后，您可以使用如下的散布运算符进行保存。

saveStudent(student: Student) {
    return new Promise<Student> ((resolve, reject) => {
      this.fireStore.collection('students').add({...student}).then(res => {}, err => reject(err));
    });
  }

Answer 6

从documentation

要使用自定义类，必须为类定义一个FirestoreDataConverter函数。例如：

class City {
    constructor (name, state, country ) {
        this.name = name;
        this.state = state;
        this.country = country;
    }
    toString() {
        return this.name + ', ' + this.state + ', ' + this.country;
    }
}

// Firestore data converter
var cityConverter = {
    toFirestore: function(city) {
        return {
            name: city.name,
            state: city.state,
            country: city.country
            }
    },
    fromFirestore: function(snapshot, options){
        const data = snapshot.data(options);
        return new City(data.name, data.state, data.country)
    }
}

通过写操作调用数据转换器：

// Set with cityConverter
db.collection("cities").doc("LA")
  .withConverter(cityConverter)
  .set(new City("Los Angeles", "CA", "USA"));

函数CollectionReference.add（）要求其第一个参数为object类型，但它是：undefined

6 个答案: