如何使用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. Status:', xhr.status);
        }
    }  
}
xhr.setRequestHeader('Content-Type', 'image/jpeg');
xhr.send({ uri: imageUri, type: 'image/jpeg', name: fileName});

此代码取自this really useful article。