【问题标题】:Firebase: Error loading preview after uploadFirebase:上传后加载预览时出错
【发布时间】:2021-07-13 20:10:15
【问题描述】:

有人可以帮忙吗?我已经搜索了几个小时的文档,但找不到正确的解决方案。我正在尝试上传我在项目中名为 house.jpg 的硬编码图像。但是,当我上传它时,它没有正确上传。我指定它是一个图像,但它只显示“错误加载预览”。它也以 9 个字节存储,而它应该存储大约 50KB。

var storageRef = storage.ref();
var propertyRef = storageRef.child(mainImageUrl);
console.log("adding property image")

const myPromise = new Promise((resolve, reject) =>{
    var metadata = {
       contentType: 'image/jpeg',
       cacheControl: 'public,max-age=300',
    };
    var image = "../../assets/icons/house.jpg"
    console.log(image)
    propertyRef.put(image, metadata).then((snapshot)=>{
        console.log('Uploaded a file', snapshot);
        snapshot.ref.getDownloadURL().then((downloadURL)=>{
            console.log("url: ", downloadURL);
                resolve(downloadURL);
            })
        }).catch((error)=>{
                reject(error);
        })
   });

【问题讨论】:

    标签: javascript firebase firebase-storage image-upload


    【解决方案1】:

    您将字符串 ../../assets/icons/house.jpg 保存为文件

    如果你想从这个位置保存文件,你必须先获取数据。

    需要:

    var storageRef = storage.ref();
    var propertyRef = storageRef.child(mainImageUrl);
    console.log("adding property image")
    
    const myPromise = new Promise((resolve, reject) =>{
        var metadata = {
           contentType: 'image/jpeg',
           cacheControl: 'public,max-age=300',
        };
        var image = require("../../assets/icons/house.jpg")
        console.log(image)
        propertyRef.put(image, metadata).then((snapshot)=>{
            console.log('Uploaded a file', snapshot);
            snapshot.ref.getDownloadURL().then((downloadURL)=>{
                console.log("url: ", downloadURL);
                    resolve(downloadURL);
                })
            }).catch((error)=>{
                    reject(error);
            })
       });
    

    【讨论】:

    • 但最好的方法是不要硬编码,使用firebase console中的上传按钮
    猜你喜欢
    • 2021-08-11
    • 2021-08-12
    • 2021-08-21
    • 1970-01-01
    • 2021-01-25
    • 1970-01-01
    • 2020-04-19
    • 2020-05-19
    • 2022-06-17
    相关资源
    最近更新 更多