使用图像URI将照片上传到Firebase存储

Question

我目前正在尝试将一张照片上传到我的Apache Cordova应用程序中Firebase应用的存储中。我目前使用以下代码获取照片的URI：

function getPhotoFromAlbum() {

    navigator.camera.getPicture(onPhotoURISuccess, onFail, {
        quality: 50,
        sourceType: navigator.camera.PictureSourceType.SAVEDPHOTOALBUM,
        destinationType: navigator.camera.DestinationType.FILE_URI
    });
}

function onPhotoURISuccess(imageURI) {
    var image = document.getElementById('image');
    image.style.display = 'block';
    image.src = imageURI;

    getFileEntry(imageURI);

}

然后我尝试将图像转换为文件，并使用以下函数将其推送到Firebase存储：

function getFileEntry(imgUri) {
    window.resolveLocalFileSystemURL(imgUri, function success(fileEntry) {

        console.log("got file: " + fileEntry.fullPath);
        var filename = "test.jpg";
        var storageRef = firebase.storage().ref('/images/' + filename);
        var uploadTask = storageRef.put(fileEntry);

    }, function () {
        // If don't get the FileEntry (which may happen when testing
        // on some emulators), copy to a new FileEntry.
        createNewFileEntry(imgUri);
    });
}

我已安装了文件和相机 Cordova 插件，但在尝试执行此操作时，唯一遇到的错误是

Error in Success callbackId: File1733312835 : [object Object]

这只是 cordova.js 的一个错误信息。

我也知道我的 Firebase 存储设置正确，因为我通过模拟器测试了它，通过添加文件输入并成功上传用户添加的任何文件到 Firebase 存储。

是否可以使用将图像转换为文件的 URI 的方法上传文件到 Firebase 存储？如果可以，那么正确的方式是什么 / 我现在的方式有什么问题？

- Roger99

---

请提及在Firebase存储中使用的Cordova插件。 - Phaneendra Charyulu Kanduri

Answer 1

我通过使用数据 URL 实现了图像上传。以下是我的代码：

var filename = "test.jpg";
var storageRef = firebase.storage().ref('/images/' + filename);

var message = 'data:image/jpg;base64,' + imageUri;
storageRef.putString(message, 'data_url').then(function (snapshot) {
  console.log('Uploaded a data_url string!');
});

- Roger99

---

我有一个类似的问题，我想尝试这个解决方案，但是imageUri从哪里来？ - Michel

如何在 Cordova 中获取 firebase.storage()？ - Phaneendra Charyulu Kanduri

我认为内容类型应该是image/jpeg而不是image/jpg。 - Edward Koetsjarjan

当我尝试这个时，会出现“storageRef.putString不是一个函数”的错误提示 - 你有什么想法为什么会这样？ - Andrew Torr

Answer 2

通过将图像转换为文件并上传，可以使用此方法将文件上传到Firebase存储吗？如果可以，那么正确的方法是什么/我现在的方法有什么问题？

是的，可以通过URI上传文件到Firebase。但是您必须遵循正确的方式。

1.完成文件读取操作后，您必须将数据存储在firebase中。您可以使用FileReader.onloadend进行此操作。

2.通过使用data_url，您可以存储到firebase。

以下是更清晰的代码片段：

function getFileEntry(imgUri) {
    window.resolveLocalFileSystemURL(imgUri, function onSuccess(fileEntry) {
            fileEntry.file(function(file) { 
                var reader = new FileReader();
                reader.onloadend = function() {
                    filename = "test.jpg";
                var storageRef = firebase.storage().ref('/images/' + filename);
             var data = 'data:image/jpg;base64,' + imgUri;
                storageRef.putString(data, 'data_url').then(function (snapshot) {
                    console.log('Image is uploaded by base64 format...');
                });
                };
                reader.readAsArrayBuffer(file);
            });
        },
        function onError(err) {
             console.log(err);
             createNewFileEntry(imgUri);
        });
}

- NullPointer

---

谢谢你的回答，但不幸的是，当我尝试你的代码时，在我的控制台中出现了以下错误：DOMException：提供给API的URI格式不正确，或者生成的Data URL已超过Data URL的URL长度限制。你有任何想法如何解决这个问题吗？ - Roger99

这是一个传递给 'imgUri' 参数的示例内容，如果有帮助的话：blob:http://localhost:4400/398f59cd-1d97-4f70-95fb-12ca15bee524 - Roger99

所以 localhost:4400/398f59cd-1d97-4f70-95fb-12ca15bee524 这个是指 this.result 对吧？还有你是在设备上运行还是在浏览器上？ - NullPointer

另外，请告诉我 console.log("got file: " + fileEntry.fullPath); 的输出结果。 - NullPointer

当我在window.resolveLocalFileSystemURL调用之前调用console.log(imgUri)时，输出的是blob:localhost:4400/398f59cd-1d97-4f70-95fb-12ca15bee524。当我尝试将imgUri参数传递进去时，出现了错误消息，因此无法在该方法中放置任何日志，因为当参数在方法开头传递时，它将失败。 - Roger99