上传到Firebase存储会执行，但图像会以黑色方块的形式返回。尝试了一切

Question

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

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

我找回图像的正确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)
  }

我已经研究了两天，并且已经多次询问过我在网络开发中的不和谐，我仍然无法修复它。

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

Answer 1

当我也在寻找答案时发现了这个问题。根据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时，知道在React Native中有问题。

希望这能解决它。

Answer 2

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

Blob.build（data，{type：'application / octet-stream; BASE64'}）;

不确定这是否是您用来创建blob的方法，但如果是这样，使用它作为类型修复了我的问题。