如何使用 Axios 将本地设备映像上传到 S3 存储桶

Question

我需要将图像直接上传到 S3 存储桶。我正在使用反应原生和反应原生图像选择器来选择照片。这将返回本地图像 URI。这是我现在的代码。

ImagePicker.showImagePicker(options, response => {
var bodyFormData = new FormData(); // If I don't use FormData I end up 
// uploading the json not an image
bodyFormData.append('image', {
uri: response.uri, // uri rather than data to avoid loading into memory
type: 'image/jpeg'
});
const uploadImageRequest = {
method: 'PUT',
url: presignedS3Url,
body: bodyFormData,
headers: {
'Content-Type: 'multipart/form-data'
}
};
axios(uploadImageRequest);
});

这几乎有效..当我检查我的S3存储桶时，我有一个几乎是图像的文件。它具有以下格式

--Y_kogEdJ16jhDUS9qhn.KjyYACKZGEw0gO-8vPw3BcdOMIrqVtmXsdJOLPl6nKFDJmLpvj^M
content-disposition: form-data; name="image"^M
content-type: image/jpeg^M
^M
<Image data>

如果我手动进入并删除标题，那么我就有了我的图像！但是，我需要将图像直接上传到 S3，客户端将抓取并期望已经采用正确的图像格式。

我可以使用 response.data 并解码为字符串并直接上传来完成这项工作，但为了记忆起见，我宁愿不这样做。

Answer 1

使用带有预签名 URL 的 AJAX 从客户端将图像上传到 S3

自从你发布你的问题以来已经有一段时间了，所以我想你已经找到了解决方案，但无论如何......我试图做同样的事情，即使用 axios 将图像上传到 S3，但我只是无法使其正常工作。幸运的是，我发现我们可以轻松地使用普通 AJAX 解决问题：

const xhr = new XMLHttpRequest();
xhr.open('PUT', presignedS3Url);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log('Image successfully uploaded to S3');
} else {
console.log('Error while sending the image to S3.nStatus:', xhr.status, "nError text: ", xhr.responseText);
}
}  
}
xhr.setRequestHeader('Content-Type', 'image/jpeg');
xhr.send({ uri: imageUri, type: 'image/jpeg', name: fileName});

这段代码取自这篇非常有用的文章，它借用了这个博客。