Firebase 存储正在将图像上传为 9B 文件

Question

我正在开发一个上传图片的程序。我正在使用“expo-image-picker”来选择图像，它正在正确更新“图像”状态，如下所示。代码执行，图像文件上传到 Firebase 存储，但上传为 9 字节文件，而不是完整的 2.4 mb 图像。

请帮助我理解我所犯的错误。

---

图像值： file:///var/mobile/Containers/Data/Application/15A92FD5-894C-47D6-ABEF-36F73CA7F778/Library/Caches/ExponentExperienceData/%2540anonymous%252Fapp26Apr-a5cceae1-72c0-4cec-a926-ffb46822d087/ImagePicker/C7ABC0E1- 80FC-4B87-A1AD-8B6DD4A1BB9A.jpg

uploadUri 值： /var/mobile/Containers/Data/Application/15A92FD5-894C-47D6-ABEF-36F73CA7F778/Library/Caches/ExponentExperienceData/%2540anonymous%252Fapp26Apr-a5cceae1-72c0-4cec-a926-ffb46822d087/ImagePicker/C7ABC0E1-80FC A1AD-8B6DD4A1BB9A.jpg

文件名值： C7ABC0E1-80FC-4B87-A1AD-8B6DD4A1BB9A.jpg

---

const uri = image;
const filename = uri.substring(uri.lastIndexOf("/") + 1);
const uploadUri = Platform.OS === "ios" ? uri.replace("file://", "") : uri;

firebase
  .storage()
  .ref(filename)
  .put(uploadUri)
  .then((value) => {
    console.log("Image uploaded");
  });

Answer 1

我遇到了同样的问题，几个小时后找到了解决方案。您必须将图像转换为文件/blob 格式并将其放在 put() 上。

解决方案如下代码：

fetch(filePath)
  .then(response => {
    return response.blob();
  })
  .then(blob => {
    const storageRef = firebase.storage().ref().child('test.png');
    storageRef.put(blob).then(snapshot => {
      console.log('Uploaded a blob or file!');
    });
  });

Answer 2

我可以找到使用 blob 保存图像的解决方案。在下面分享，以防有人遇到同样的问题。

let uri = image;
const filename = uri.substring(uri.lastIndexOf("/") + 1);
const uploadUri = Platform.OS === "ios" ? uri.replace("file://", "") : uri;

const blob = await new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest();
  xhr.onload = function () {
    resolve(xhr.response);
  };
  xhr.onerror = function (e) {
    console.log(e);
    reject(new TypeError("Network request failed"));
  };
  xhr.responseType = "blob";
  xhr.open("GET", uri, true);
  xhr.send(null);
});

firebase
  .storage()
  .ref()
  .child("user/" + userid)
  .put(blob)
  .then((uri) => {
    console.log(uri);
  })
  .catch((error) => {
    console.log(error);
  });