上传到 Firebase 存储执行，但图像返回为黑色方块。尝试了一切答案

【问题标题】：Upload to Firebase Storage executes but image comes back as a black square. Tried everything上传到 Firebase 存储执行，但图像返回为黑色方块。尝试了一切
【发布时间】：2019-07-01 17:20:36
【问题描述】：

嘿，我一直在使用 react native + firebase auth/storage/realtimedb 构建一个全栈的 tinder 应用程序。

到目前为止一切都很好，但我几天前遇到了一个问题，我不知道它出了什么问题。

我取回图像的正确 uri 并将其作为参数传递给我的 uploadImage 函数并将其转换为 blob。它将文件上传到 Firebase 存储，但它不是我的图像。这是上传的内容：

Image that is getting uploaded.

Weird things going on in the file description of my 'image'

我注意到的第一件事是，当我上传图片并查看假定图片的描述时，我发现大小为 600,000 字节，这很奇怪，因为当我通过 firebase 存储控制台手动上传图片时，它们只有几个兆字节。

第二件事是图像预览不起作用。

editAvi = async () => {
      console.log('wtf')
        await Permissions.askAsync(Permissions.CAMERA_ROLL);
        const { cancelled, uri } = await ImagePicker.launchImageLibraryAsync({
          allowsEditing: true,
        });
        if (!cancelled) {
          this.setState({ image: uri });
  }
        console.log('The image is' + this.state.image)
      };
  uploadImage = async (uri, imageName) => {
    // Create file metadata including the content type
    var metadata = {
      contentType: 'image/jpeg',
    }
    // Points to the root reference

    var storageRef = firebase.storage().ref();

    // Points to 'images'
    const response = await fetch(uri);
    const blob = await response.blob();

    var ref = storageRef.child('images/' + this.state.currentID);
    ref.put(uri, metadata);
      console.log('This is the blob: ' + blob)
  }

我已经对此进行了两天的广泛研究，并在我所处的网络开发不和谐中多次询问过它，但我仍然无法修复它。

请帮我解决这个问题！这是完成此应用程序所需的最后一件事。 :)

【问题讨论】：

我看到您将contentType 设置为var metadata，但是您是否向var metadata 添加了数据？
好的，所以我必须添加 var 元数据的原因是因为之前，我的图像一直作为 application/octet-stream 上传，这已经是一个危险信号。不确定将数据添加到元数据变量是什么意思。在我的元数据 var 中有一个 contentType: 'image/jpeg' 解决了 application/octet-stream 的问题

标签： reactjs firebase react-native firebase-storage expo

【解决方案1】：

当我四处寻找完全相同的问题的解决方案时发现了这个问题。经过大约 12 小时的反复试验后，我通过在创建 blob 时添加类型“application/octet-stream;BASE64”来修复它（使用 rn-fetch-blob）。

Blob.build(data, { type: 'application/octet-stream;BASE64' });

不确定这是否是您用于创建 blob 的方法，但如果是，则使用该类型为我解决了问题。

【讨论】：

【解决方案2】：

我也在寻找答案时发现了这个问题。根据 Github 问题https://github.com/expo/expo/issues/2402#issuecomment-443726662 的建议，我能够解决这个问题

主要思想是替换

const response = await fetch(uri);
const blob = await response.blob();
var ref = storageRef.child('images/' + this.state.currentID);
ref.put(uri, metadata);

与

const blob = await new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.onload = () => {
                resolve(xhr.response);
            };
            xhr.onerror = (e) => {
                reject(new TypeError("Network request failed"));
            };
            xhr.responseType = "blob";
            xhr.open("GET", uri, true);
            xhr.send(null);
        });
var ref = storageRef.child('images/' + this.state.currentID);
ref.put(blob, metadata);

在使用 Expo 时，知道 ReacNative 中存在问题。

希望这能解决它。

【讨论】：