使用React JS将图像阵列添加到Firebase存储和实时数据库

Question

我正在尝试将一系列本地图像推送到Firebase存储和我的数据库。图像正在我的数据库json方案中输出，但是存储中什么都没有显示，并且继续接收以下错误。有什么想法吗？

错误：

数据库JSON方案：

{
  "users" : {
    "XhLxS1KUS8UyHjsuHYrEuyipQX53" : {
      "Email" : "ssssss@gmail.com",
      "code" : "bob",
      "image1" : {
        "id" : "223d7f60-331b-11e9-b680-6b36b34d4cc6",
        "url" : "holder1.png"
      },
      "image2" : {
        "id" : "223da670-331b-11e9-b680-6b36b34d4cc6",
        "url" : "holder2.png"
      },
      "image3" : {
        "id" : "223da671-331b-11e9-b680-6b36b34d4cc6",
        "url" : "holder3.png"
      },
      "location" : "fl"
    }
  }
}

反应JS：

const images = [
  {
    id: uuid(),
    url: `holder1.png`
  },
  {
    id: uuid(),
    url: `holder2.png`
  },
  {
    id: uuid(),
    url: `holder3.png`
  }
];


class Register extends Component {
  state = {
    email: '',
    password: '',
    code: 'bob',
    location: 'fl',
    image: null,
    url: '',
    error: null,
    arr: images,
  };


  handleInputChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleChange = e => {
    if (e.target.files[0]) {
      const image = this.state.arr;
      this.setState(() => ({ image }));
      console.log(image)
    }
  }

  handleSubmit = (event) => {
    event.preventDefault();
    const { email, password, image, url } = this.state;

    const storageRef = storage.ref(`images/`);
    this.state.image.map((file, index) => {
      storageRef
        .child(`${file.url}`)
        .getDownloadURL().then(url => {
          this.setState({ url }); <---Should I set state?
        })
    });

    firebase
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then((user) => {
        firebase
        .database()
        .ref('users/' + user.user.uid)
        .set({
          Email: user.user.email,
          code:  this.state.code,
          location:  this.state.location,
          image1:  images[0],
          image2:  images[1],
          image3:  images[2]
        })
        //console.log(this.state.url)
        this.props.history.push('/');
      })
      .catch((error) => {
        this.setState({ error: error });
      });
  };
....

这适用于存储单个图像：

反应JS：

class Register extends Component {
  state = {
    email: '',
    password: '',
    code: 'bob',
    location: 'fl',
    image: null,
    url: '',
    error: null,
  };


  handleInputChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleChange = e => {
    if (e.target.files[0]) {
      const image = e.target.files[0];
      this.setState(() => ({image}));
    }
  }

  handleSubmit = (event) => {
    event.preventDefault();
    const { email, password, image, url } = this.state;
    const uploadTask = storage.ref(`images/${image.name}`).put(image);

    uploadTask.on('state_changed', () => {
      storage.ref('images').child(image.name).getDownloadURL().then(url => {
          console.log(url);
          this.setState({url});
      })
    });

    firebase
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then((user) => {
        firebase
        .database()
        .ref('users/' + user.user.uid)
        .set({
          Email: user.user.email,
          code:  this.state.code,
          location:  this.state.location,
          image:  this.state.url
        })
        this.props.history.push('/');
      })
      .catch((error) => {
        this.setState({ error: error });
      });
  };
...

Answer 1

我commented on your previous question的时候：

  

您需要从getDownloadUrl()的回调中将URL写入数据库。因此，现在您要呼叫this.setState({url});的地方，也要呼叫类似firebase.database().ref('users/' + user.user.uid + '/image').set(url);的东西。

另外，据我在documentation上看到的，UploadTask.on('state_changed'有三个回调，上载完成后将调用第三个。

所以：

uploadTask.on('state_changed', function(snapshot) {
  // handle progress messages here
},(error) => {
  // handle errors here
},() => {
  storage.ref('images').child(image.name).getDownloadURL().then(url => {
      console.log(url);
      this.setState({url});
      firebase.database().ref('users/' + user.user.uid + '/image').set(url);
  })
});