从 react native 将图像上传到 AWS 预签名 URL答案

【问题标题】：Upload image to AWS presigned URL from react native从 react native 将图像上传到 AWS 预签名 URL
【发布时间】：2021-03-24 09:38:29
【问题描述】：

我正在尝试将图像上传到 AWS Presigned url。我可以获得预签名的 url，然后我可以从 Postman 上传图像，但我尝试从 React Native 应用程序发送，只发送 uri 信息（content://media/external/images/media/108721）。我尝试了很多东西，但我做不到。你能帮帮我吗？

我正在使用 react-native-image-picker 来选择一张图片。

showImagePicker = () => {
    const options = {
        title: 'Profile Picture',
        storageOptions: {
            skipBackup: true,
            path: 'images',
            base64: true,
        },
    };
    ImagePicker.showImagePicker(options, (response) => {
        console.log('Response = ', response);

        if (response.didCancel) {
            console.log('User cancelled image picker');
        } else if (response.error) {
            console.log('ImagePicker Error: ', response.error);
        } else if (response.customButton) {
            console.log('User tapped custom button: ', response.customButton);
        } else {
            const source = { uri: response.uri };
            const avatarData = response;

            let presignedUrl = "mypresignedurl";
            const xhr = new XMLHttpRequest()
            xhr.open('PUT', presignedUrl)
            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', xhr.responseText)
                    }
                }
            }
            xhr.setRequestHeader('Content-Type', response.type)
            xhr.setRequestHeader('content-lenght', response.fileSize)
            xhr.send(response.uri);

            this.setState({
                avatarSource: source,
                avatarData: avatarData,
                imageModalVisibilty: true
            });

        }
    });
}

我看到很多这样的例子，但我只是发送 uri 字符串。

【问题讨论】：

标签： react-native amazon-s3 xmlhttprequest pre-signed-url

【解决方案1】：

我用另一种方式解决了这个问题。我必须获取 blob 数据:)

export const getBlob = async (fileUri) => {
const resp = await fetch(fileUri);
const imageBody = await resp.blob();
return imageBody;
};

export const uploadImageNew = async (uploadUrl, data) => {
const imageBody = await getBlob(data);

return fetch(uploadUrl, {
    method: "PUT",
    body: imageBody,
});
};

reference

【讨论】：