使用 ionic2 将图像上传到 Firebase 存储答案

【问题标题】：Using ionic2 to upload image to firebase storage使用 ionic2 将图像上传到 Firebase 存储
【发布时间】：2016-08-21 04:20:02
【问题描述】：

我正在使用 ionic2 beta 11 和 firebase 3。我想尝试将一些图像上传到 firebase 存储。我已经设置了 home.ts 但遇到以下错误：

错误 TS2345：“字符串”类型的参数不可分配给“Blob”类型的参数。

//听从https://firebase.google.com/docs/storage/web/upload-files的指令

import * as firebase from 'firebase';

public storageRef : any;

constructor () {}

uploadfile(){

var file = "http://imgs.sundaykiss.com/wp-content/uploads/2016/08/278k_kissfocus09.jpg";

var metadata = {
  contentType: 'image/jpeg'
};

var storageRef = firebase.storage().ref('images/' + file); 

var uploadTask = storageRef.put(file, metadata);

// 编辑想要我上面的文件，'string' 类型的参数不能分配给'Blob' 类型的参数。

我可以知道为什么吗？非常感谢。

【问题讨论】：

标签： javascript ionic2 firebase-storage

【解决方案1】：

put() 通过 JavaScript File 和 Blob API 获取文件不是你给它的字符串。如果您没有字节流形式的文件，则必须将其从 url 读取到 blob/文件中。

【讨论】：

非常感谢！我已尝试阅读这些文档，但我无法将 URL 图像转换为 blob/文件，请问您可以举个例子吗？再次感谢！
示例链接stackoverflow.com/questions/25046301/…

【解决方案2】：

由于您使用的是远程 url，您应该能够使用 fetch polyfill 从图像中获取 blob。

npm module whatwg-fetch

  makeFileIntoBlob(_imagePath) {
    return fetch(_imagePath).then((_response) => {
      return _response.blob();
    }).then((_blob) => {
      return _blob;
    });
  }

完整的例子在这里https://github.com/aaronksaunders/firebaseStorage2

还有一个youtube视频展示了整个过程Ionic2 Firebase Image Upload

【讨论】：