无法从反应本机自定义图像选取器获取数据响应对象

Question

我在文档中读到：https://github.com/mg365/react-native-customized-image-picker 我可以从图像中获取数据的响应对象，但是当我尝试时，我得到了undefined.我可以像这样获取其他对象，例如大小、哑剧和路径：

SelectPhoto = () =>{
ImagePicker.openPicker({
cropping: true,
title: 'Select a Picture',
isCamera: true,
}).then((imgResponse) => {
console.log(imgResponse[0].path); <-- This logs the correct path
console.log(imgResponse[0].data); <-- This logs the undefined
let imgSource = { uri: imgResponse[0].path };
this.setState({
userimgSource: imgSource,
});
});
}

我的最终目标是将图像上传到服务器，我认为需要数据吗？我正在使用RNFetchBlob multipart/form-data。非常感谢对此的任何帮助，谢谢！

Answer 1

首先，根本不需要数据属性，您可以使用 path 上传文件。如果你真的想要数据，那么有一个道具名称"includeBase64"(默认情况下为 false(将其设置为 true。

SelectPhoto = () =>{
ImagePicker.openPicker({
cropping: true,
title: 'Select a Picture',
isCamera: true,
includeBase64:true

})

注意：设置 {includeBase64： true} 会将您的图像转换为 base64，这可能会导致当您尝试上传大图像时 android 出现内存不足问题。

上传你的使用路径和反应原生获取-blob

RNFetchBlob.fetch('POST', URL, {
// dropbox upload headers
...
'Content-Type': 'multipart/form-data',
// Change BASE64 encoded data to a file path with prefix `RNFetchBlob-file://`.
// Or simply wrap the file path with RNFetchBlob.wrap().
}, [
// element with property `filename` will be transformed into `file` in form data
{ name: 'file', filename: 'Image.png', data: RNFetchBlob.wrap(response.uri) },
// custom content type
]).then((res) => {
})
.catch((err) => {
// error handling ..
})

如果你有 RN>=0.54，那么你不需要 fetch-blob 来上传图像 React-native 现在有完整的 blob 支持。

var photo = {
uri: URI,
type:image/png, // check your object you will get  mime-type in image picker response.
name: file,
fileName:Image.png
};
var body = new FormData();
body.append('file', photo);
axios({
method: 'post',
url: 'URL',
data: body,
config: { headers: {'Content-Type': 'multipart/form-data' }}
})

参考链接

使用 React-native-fetch-blob 上传视频

反应本机 blob 支持公告

使用 Axios 发送表单数据