当我在ios上上传图片时,expo image picker给出的网络请求失败,但在android上工作正常
这是我用来在IOS上上传图像的代码当我在ios上上传图片时,expo image picker给出的网络请求失败,但在android上工作正常,ios,image,react-native,file-upload,expo,Ios,Image,React Native,File Upload,Expo,这是我用来在IOS上上传图像的代码 let result=wait ImagePicker.launchImageLibraryAsync({ mediaTypes:ImagePicker.MediaTypeOptions.Image, 允许编辑:对, 质量:1,, });我在谷歌上搜索了很多次后找到了一个解决方案 我们需要在ios物理设备中用/private替换文件:/ 在Expo团队处理修补react本机版本时,还有一个解决此问题的方法。对于iOS,你可以使用这个,对于android,常规
let result=wait ImagePicker.launchImageLibraryAsync({
mediaTypes:ImagePicker.MediaTypeOptions.Image,
允许编辑:对,
质量:1,,
});代码>我在谷歌上搜索了很多次后找到了一个解决方案
我们需要在ios物理设备中用/private替换文件:/
在Expo团队处理修补react本机版本时,还有一个解决此问题的方法。对于iOS,你可以使用这个,对于android,常规的XHR就足够了,这是一个详细的问题。我很长一段时间都有同样的问题。这就是我所做的
请确保按照《放大指南》设置应用程序。放大init、放大addauth、放大push,然后放大add storage,然后执行此操作
import Amplify, { Storage } from 'aws-amplify'
import config from './src/aws-exports'
// import awsconfig from './aws-exports';
// Might need to switch line 7 to awsconfig
Amplify.configure(config)
import { StatusBar } from 'expo-status-bar';
import React, { useState, useEffect } from 'react';
import { Button, Image, View, Platform, StyleSheet, Text, TextInput } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
function App() {
const [image, setImage] = useState(null)
const [name, setName] = useState('Evan Erickson')
useEffect(() => {
(async () => {
if (Platform.OS !== 'web') {
const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (status !== 'granted') {
alert('Sorry, we need camera roll permissions to make this work!');
}
}
})();
}, []);
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
console.log(result)
async function pathToImageFile(data) {
try {
const response = await fetch(data);
const blob = await response.blob();
await Storage.put(`customers/${name}`, blob, {
contentType: 'image/jpeg', // contentType is optional
});
} catch (err) {
console.log('Error uploading file:', err);
}
}
// later
pathToImageFile(result.uri);
}
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button title="Pick an image from camera roll" onPress={pickImage} />
{image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
<Button title="Upload image" onPress={() => {alert(image)}} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default withAuthenticator(App)
导入放大,{Storage}来自“aws放大”
从“/src/aws exports”导入配置
//从“/aws exports”导入awsconfig;
//可能需要将线路7切换到awsconfig
Amplify.configure(配置)
从“博览会状态栏”导入{StatusBar};
从“React”导入React,{useState,useffect};
从“react native”导入{按钮、图像、视图、平台、样式表、文本、文本输入};
从“世博会图像采集器”导入*作为图像采集器;
函数App(){
常量[image,setImage]=useState(null)
const[name,setName]=useState('Evan Erickson')
useffect(()=>{
(异步()=>{
如果(Platform.OS!=“web”){
const{status}=等待ImagePicker.requestMediaLibraryPermissionsAsync();
如果(状态!=“已授予”){
警报('抱歉,我们需要摄像头滚动权限才能执行此操作!');
}
}
})();
}, []);
const pickImage=async()=>{
让结果=等待ImagePicker.launchImageLibraryAsync({
mediaTypes:ImagePicker.MediaTypeOptions.All,
允许编辑:对,
相位:[4,3],
质量:1,,
});
console.log(结果)
异步函数pathToImageFile(数据){
试一试{
常量响应=等待获取(数据);
const blob=wait response.blob();
等待存储。put(`customers/${name}`,blob{
contentType:'image/jpeg',//contentType是可选的
});
}捕捉(错误){
log('上传文件时出错',错误);
}
}
//后来
pathToImageFile(result.uri);
}
返回(
{image&&}
{警报(图像)}}/>
);
}
const styles=StyleSheet.create({
容器:{
弹性:1,
背景颜色:“#fff”,
对齐项目:“居中”,
为内容辩护:“中心”,
},
});
使用验证器导出默认值(应用程序)
这是RN中的一个bug:)我也遇到了这种情况。有更多的信息或解决方法吗?非常感谢。你是如何修复它的,因为我仍然有文件:/,我不知道如何更改它。