从图像 URI 创建 Javascript 文件/Blob 对象答案

【问题标题】：Create Javascript File/Blob object from image URI从图像 URI 创建 Javascript 文件/Blob 对象
【发布时间】：2017-02-15 04:59:33
【问题描述】：

是否可以从图像 URI 中为我的图像创建文件或 Blob 对象？

使用我的移动应用程序上的一个插件 Cordova Image Picker，我可以检索如下所示的照片 URI：“file:///data/user/0/..../image.jpg”

但是，我现在正在尝试创建 Google Firebase 上传图片所需的文件或 Blob 对象。我只是不知道怎么做。我尝试的每一个解决方案似乎都是错误的，以至于我认为我从一个完全错误的角度看待它。我是 Javascript 新手。非常感谢！

【问题讨论】：

标签： javascript angularjs cordova firebase firebase-storage

【解决方案1】：

看看我不久前发布的一个问题，它处理这个问题，但对于视频（同样的原则适用）：Uploading video to firebase (3.0) storage using cordovaFileTransfer

您需要使用cordova的文件插件读取arrayBuffer，然后使用blob；类似：

var file_path = "root/to/directory";
var name = "filename.jpg";

                $cordovaFile.readAsArrayBuffer(file_path, name)
                    .then(function (success) {
                        // success
                        console.log(success);

                      blob = new Blob([success], {type: "image/jpeg"});

                      console.log(blob);

                      var uploadTask = storageRef.child(name).put(blob);

                      uploadTask.on('state_changed', function(snapshot){
                        // Observe state change events such as progress, pause, and resume
                        // See below for more detail

                          var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                          console.log('Upload is ' + progress + '% done'); 

                      }, function(error) {
                        // Handle unsuccessful uploads
                        console.log("Error uploading: " + error)
                      }, function() {
                        // Handle successful uploads on complete
                        // For instance, get the download URL: https://firebasestorage.googleapis.com/...
                        var downloadURL = uploadTask.snapshot.downloadURL;
                        console.log("Success!", downloadURL);
                      });

                      }, function (error) {
                        // error
                        console.log("Failed to read file from directory, error.code);

                      }

如果您的程序向您传递了图像的完整路径，您需要将名称与存储图像的目录的路径分开。就在决赛之后寻找一切 /

【讨论】：