使用放大存储将图像错误地上传到 s3 (React Native - Expo - Amplify)

Question

我正在尝试使用 Amplify Storage API.
我使用 EXPO imagePicker 从 phone 上传图片到 React-Native，它显示正确。
然后我使用 amplify Storage.put 将它上传到 s3，它到达 s3 中的正确文件夹，使用我给它的正确文件名和我提供的 public 访问权限（到图像和桶本身）。
但是如果我尝试在 s3 中打开照片 uri，它不会显示。当我检查浏览器时，它在控制台上显示此错误：

如果我在浏览器中粘贴从 Storage.get 获得的 uri，我会收到此错误：

我的代码如下（我帮助自己完成了本教程https://blog.expo.io/how-to-build-cloud-powered-mobile-apps-with-expo-aws-amplify-2fddc898f9a2）：

  _handleImagePicked = async (pickerResult) => {
    const s3path = 'fotos_cdcc/' + '186620' + '/'
    const imageName = '186620_4' + '.jpeg'
    const key = s3path + imageName
    const fileType = pickerResult.type;
    const access = { level: "public", contentType: 'image/jpg' };
    const imageData = await global.fetch(pickerResult.uri)
    const blobData = await imageData.blob()

    try {
      await Storage.put(
        key, 
        blobData, 
        access,
        fileType
        ).then(result => console.log(result))
    } catch (err) {
      console.log('error: ', err)
    }
  }

pickerResult 具有以下形式：

Object {
"cancelled": false,
"height": 750,
"type": "image",
"uri": "file:///var/mobile/Containers/Data/Application/021D6288-9E88-4080-8FBF-49F5195C2073/Library/Caches/ExponentExperienceData/%2540anonymous%252Fcaballos-app-dd2fa92e-4625-47e7-940e-1630e824347a/ImagePicker/D9EE1F24-D840-457F-B884-D208FFA56892.jpg",
"width": 748,
}

我尝试在 s3 中制作桶和照片 public，但错误仍然存在。

有什么想法吗？

提前致谢！

Answer 1

也许这不是 aws-amplify 的问题，而是 fetch 和 blob 的问题。你能试试这个吗？

function urlToBlob(url) {
  return new Promise((resolve, reject) => {
      var xhr = new XMLHttpRequest();
      xhr.onerror = reject;
      xhr.onreadystatechange = () => {
          if (xhr.readyState === 4) {
              resolve(xhr.response);
          }
      };
      xhr.open('GET', url);
      xhr.responseType = 'blob'; // convert type
      xhr.send();
  })
}

然后代替

const imageData = await global.fetch(pickerResult.uri)
const blobData = await imageData.blob()

尝试

const blobData = await urlToBlob(pickerResult.uri)

请找到完整的讨论 https://github.com/expo/firebase-storage-upload-example/issues/13

使用放大存储将图像错误地上传到 s3 (React Native - Expo - Amplify)

Image uploaded incorrectly to s3 using amplify Storage (React Native - Expo - Amplify)

image

amazon-s3

react-native

expo

aws-amplify