2个输入字段,每个字段上载一张图片(React + Firebase)

时间:2018-06-21 23:04:24

标签: reactjs image firebase upload firebase-storage

问题

我在这里有此代码

<div id="second_hand">2nd hand</div>

}

在我的表格中,我有

 handleSave(e) {

const itemConexao = {
  nome: this.nome.value,
  descricao: this.descricao.value,
  codigo: this.codigo.value,
  imagem: this.imagem.files[0],
  imagemTabela: this.imagemTabela.files[0]
}

this.setState({ isUploading: true })
const arquivo = itemConexao.imagem
const { name } = arquivo

const ref = storage.ref(name)
ref.put(arquivo)
  .then(imagem => {
    imagem.ref.getDownloadURL()
      .then(downloadURL => {
        const novaConexao = {
          nome: itemConexao.nome,
          descricao: itemConexao.descricao,
          codigo: itemConexao.codigo,
          imagem: downloadURL
        }
        Base.push('conexoes', {
          data: novaConexao,
          //  { nome, descricao, codigo, imagem },
          then: error => {
            if (!error) {
              this.nome.value = ''
              this.descricao.value = ''
              this.codigo.value = ''
              this.imagem.value = ''
              this.imagemTabela.value = ''
            }
          }
        })
        this.setState({ isUploading: false })
      })
  })
e.preventDefault()

看到我有2个输入字段,每个输入字段对应一张图片...应该上传图片的字段“ imagem”效果很好。但是现在,如何使用相同的功能上传第二张图片(imagemTabela)?一次不是多个图像,而是两个图像用于不同目的。页面上将显示“ imagem”,模态上将显示“ imagemTabela”。

这里有2美分吗?

干杯=)

1 个答案:

答案 0 :(得分:1)

使文件上传功能具有自己的功能,该功能带有可配置的参数。

将ref.put位从handleSave中拉出,将参数传递给此新函数,该参数指定了要保存最终URL引用的位置。

然后,您可以运行handleSave1 with a conditional (if x then save to imagemTabela otherwise save to Imagem) or you can refactor handleSave`来获取参数并在调用函数时将其传递。