当我通过expo将图像上传到firebase时，本地没有显示图像;显示错误加载预览

Question

我使用expo在firebase中上传没有base 64的图像。该文件已上传，但我无法查看图像 - “Error loading preview”。当我尝试通过网址下载图片时，它会向我显示已损坏或损坏的图片。我的firebase上传代码是：

async function uploadImageAsync(itemImage, passedParameter, ItemName, ItemDesc, ItemPrice, ItemWeight) {



     const response = await fetch(itemImage);
      const blob = await response.blob();
       console.log("uri of the elements ius", blob)

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

     var metadata = {
        contentType: 'image/jpeg',
      };
      const timeStamp = Date.now();
      var uploadTask = storageRef.child('CategoryDescription' + "/" + `${passedParameter}` + "/" + `${ItemName}`).put(file, metadata);

而世博会图片选择器代码是：

_pickImage = async () => {
 const { CAMERA, CAMERA_ROLL } = Permissions;
 const permissions = {
  [CAMERA]: await Permissions.askAsync(CAMERA),
  [CAMERA_ROLL]: await Permissions.askAsync(CAMERA_ROLL),
 };

 if (permissions[CAMERA].status === 'granted' && permissions[CAMERA_ROLL].status === 'granted') {
  let result = await ImagePicker.launchImageLibraryAsync({
 allowsEditing: false,
 aspect:[4,3],
 quality: 0.5,
  });
  // console.log(result);

  if (!result.cancelled) {
 this.setState({ itemImage: result.uri });
  }
 }

请帮忙！

Answer 1

我之前有同样的问题。我发现这是因为launchImageLibraryAsync设置和blob格式不是图像。您可以尝试使用base64。

首先，将launchImageLibraryAsync选项设置为其他人：

const result = await ImagePicker.launchCameraAsync({
  allowsEditing: true,
  base64: true,
  aspect: [4, 3]
})

其次，将base64上传到firebase：

export const uploadAsFile = (base64, folder: string) => {
  var metadata = {
    contentType: 'image/jpeg'
  }

  let name = new Date().getTime() + '-media.jpg'
  const ref = firebase
              .storage()
              .ref()
              .child(folder + '/' + name)

  const task = ref.putString(base64, 'base64', metadata)

  return new Promise((resolve, reject) => {
      task.on(
        'state_changed',
        snapshot => {},
        error =>
        reject(error) /* this is where you would put an error callback! */,
        () => {
           const downloadURL = task.snapshot
           console.log('downloadURL:', downloadURL, name)
           resolve(name)
               }
     )})
}