从 iPhone 上传到 S3 的 jpeg 图像不可读。但适用于Photoshop答案

【问题标题】：A jpeg image uploaded from an iPhone to S3 is not readable. But works on photoshop从 iPhone 上传到 S3 的 jpeg 图像不可读。但适用于Photoshop
【发布时间】：2018-04-17 12:18:39
【问题描述】：

我正在尝试使用预签名 URL 将 jpeg 图像从 iOS 设备上传到 S3。这就是我正在做的事情：

const file = {
  uri: imageURL,
  type: 'image/jpeg'
};

const formData = new FormData();
formData.append('photo', file);
formData.append('Content-Type', 'image/jpeg');

const response = await axios({
  method: 'PUT',
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  url: s3PreSignedURL,
  data: formData
});

（该应用程序在 react native 中，我使用 react-native-camera 拍照。）

问题是图片被上传了。当我下载它并尝试在我的 Mac 上查看时，它显示The file could not be opened。 但如果我在 Photoshop 中打开它就可以了。知道发生了什么吗？

您可以在此处找到示例图片：https://s3-ap-southeast-1.amazonaws.com/eyesnapdev/scans/1509856619481-71809992-b818-4637-93f1-9a75b6588c2c.jpg

【问题讨论】：

标签： javascript react-native amazon-s3 axios react-native-camera

【解决方案1】：

似乎您没有使用formData 发送图像，而应该是这样的：

const file = {
  uri: imageURL,
  type: 'image/jpeg'
};

const formData = new FormData();
formData.append('photo', file);
formData.append('Content-Type', 'image/jpeg');

const response = await axios({
  method: 'PUT',
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  url: s3PreSignedURL,
  data: formData // not **file**
});

【讨论】：

对不起，我的错误。我在应用程序中有这样的。创建示例代码时输入错误。我确实发送了formData。但问题仍然存在。
@THpubs 尝试删除此行 formData.append('Content-Type', 'image/jpeg'); ，并对您的文件对象进行此修改：const file = { uri: imageURL, type: 'image/jpeg', name: 'IMAGE_NAME'}
我尝试删除内容类型。还是行不通。但是我需要尝试什么修改？不清楚。
啊@THpubs 也从标题中删除了 Content-Type。
你的 uri 是什么？

【解决方案2】：

您上传的图片保存了整个多部分表单数据，并且还包含以下信息（在文本编辑器中打开您的 s3 jpg 图像查看）：

--K_B9dYtGXt4.LjeMIncq0ajcL6vDRYqD1hRiwoIOJzPKYTVi8jTYT_f07RZw37Om1NJwGi content-disposition: form-data; name="photo" content-type: image/jpeg

s3 upload 只希望在 post 中上传文件的数据，而不是多部分的形式。

在深入研究 React 本机核心之后，我认为以下代码应该可以工作。不过我自己还没有尝试过：

fetch(s3PreSignedURL,{
    method:"PUT",
    headers: {
      'Content-Type': 'image/jpg'
    },
    body:{uri:imageURL}
});

或使用 axios：

axios({
  method: 'PUT',
  headers: {
    'Content-Type': 'image/jpg'
  },
  url: s3PreSignedURL,
  body:{uri:imageURL} 
});

【讨论】：