Question

我正在尝试使用Amplify Storage API将图像上传到s3。
我使用EXPO imagePicker将图像从手机上传到React-Native，并且显示正确。
然后，我使用amplify Storage.put将其上传到s3，它到达s3中的正确文件夹，并带有我给它的正确文件名以及我提供的公共访问权限（图像和存储桶本身）。
但是，如果我尝试在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中将存储桶和照片公开，但是错误仍然存在。

有什么想法吗？

谢谢！

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）

1 个答案: