react-native - 从 React Native 将图像上传到 AWS 预签名 URL
问题描述
我正在尝试将图像上传到 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 字符串。
解决方案
我用另一种方式解决了这个问题。我必须得到 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,
});
};
推荐阅读
- nginx - Nginx - 反向代理 - 404
- svg - 我需要一种更好的方法来使用 SVG 路径绘制字母
- azure-pipelines - 如何从 Azure Pipelines 表达式访问机密值?
- javascript - 将 javascript 循环转换为异步和函数式
- amazon-web-services - 在同一个 AWS EC2 实例上提供多个 Python 应用程序
- java - 在 Java 中迭代 2 个地图
- python - 无法使用 Windows Ubuntu 应用程序连接到 Docker
- r - 使用数据表将一个函数应用于具有参数值向量的多列
- python - 字典的性能优化更改
- algorithm - n^0.000001 和 log(n) 等的大 O 复杂度比较