如何从输入字段将图像上传到Firebase云存储? [英] How to upload image to firebase cloud storage from input field?

问题描述

我有一个输入字段，用户可以在其中选择要上传的图像，然后将其发送到云存储.问题是，我不知道如何获取他们选择的文件.我看到了很多类似此，这个上传之前.我认为我不需要预览图像，我只想上传它.我该怎么做呢?这是我当前的代码:

I have an input field, where users can choose what image they want to upload, and then I need to send to cloud storage. The problem is, I don't know how to get the file they selected. I saw a lot questions like this, this, this, etc. Most of the questions I saw, like this one, are asking for previewing the images BEFORE uploading. I don't think I need to preview the image, i just want to upload it. How do I do this? Here is my current code:

function addImage() {
  $("#addImage").append('\
    <input type="file" id="image" accept="image/*">\
    <button type="submit">ok</button>\
    <button onclick="cancelAddImage()">cancel</button>');
  $("#addImage").submit(function() {
    var image = $("#image").files;
    console.log(image);
    storage.ref("images").put(image).then(function(snapshot) {
      console.log('Uploaded a file!');
    });
  });
}

console.log()为此给出未定义".我还尝试了 .files [0] 而不是 .files; 以及许多其他方法.

The console.log() for this is giving "undefined". I also tried .files[0] instead of .files;, and many others.

推荐答案

在html代码中，将输入字段放置为id.例如，如果您要从相机上传图片:

In your html code, you place the input field with a an id. For example, if you want to upload a picture from the camera:

<input type="file" accept="image/*" capture="camera" id="cameraInput">

然后在您的js代码中，您将侦听此元素的更改事件:

Then in your js code, you will listen to change events on this element :

  let storageRef = firebase.storage().ref('photos/myPictureName')
  let fileUpload = document.getElementById("cameraInput")

  fileUpload.addEventListener('change', function(evt) {
      let firstFile = evt.target.files[0] // upload the first file only
      let uploadTask = storageRef.put(firstFile)
  })

当然，您需要先以某种方式包含firebase js库.

Of course you need to have somehow included the firebase js library before.

如果您使用旧版js编写代码，则还需要用var替换let并添加;在行尾.

And if you write in an older version of js, you also need to replace the let with var and add ; at the end of your lines.

这篇关于如何从输入字段将图像上传到Firebase云存储?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！