如何上传图像并将其存储在 Firebase 存储中？答案

【问题标题】：How to get an image uploaded and store it in the firebase storage?如何上传图像并将其存储在 Firebase 存储中？
【发布时间】：2020-08-04 21:31:10
【问题描述】：

我有以下上传按钮。

<input type="file" id="logo-image-upload" onChange="imageValidation()">

只要上传图片，就会调用以下函数。

    function imageValidation(){
        let storageRef = firebase.storage.ref('user-logos')
        let imageInput = document.getElementById('logo-image-upload')
        if(imageInput.files && imageInput.files[0]){
            let reader;
            reader = new FileReader();
            reader.onload = (e) => {
                    storageRef.put(//Blob).then(function(snapshot) {
                        console.log("Image Uploaded")
                    });
                }
            }
        }

我可以传递什么作为 Image 的值，以便将其上传到 Firebase 存储？

【问题讨论】：

标签： javascript firebase firebase-storage

【解决方案1】：

请同时添加您的 html 代码以便更好地理解。但是，如果您的输入是 File 类型，您可以直接将其上传到 Firebase。 Blob 中无需转换。

您可以参考以下代码来实现您的目标。

    let uploadTask: firebase.storage.UploadTask = storageRef.put(imageInput.files[0]);
    uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
      (snapshot: any) => {
        let x: number = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        return subject.next({ status: x, fileUploadSuccess: false, fileUploading: true, fileUploadFailed: false, progress: true });
      })

我认为您可以使用这种方法解决您的问题。

【讨论】：

嘿，谢谢你的回答，但你能解释一下我应该在${fileName} 和file 变量中具体放什么吗？谢谢。
如果user-logos下有文件夹，则有child的使用，否则省略该部分。你可以只写 storageRef.put()。变量文件是您要上传的实际文件。
在您的情况下，您可以使用 storageRef.put(imageInput.files[0])