React Native：控制台警告可能未处理的承诺拒绝（id：0）：TypeError：无法读取 null 的属性“uri”
问题描述 投票：0回答：3
我正在按照本教程在 React Native 中将照片上传到 Firebase，并使用“react-native-image-picker”和“launchImageLibrary”（而不是教程中的“showImagePicker”，因为它不再在使用）。但是，当我单击“上传图像”按钮时，我收到此错误/警告：
我的UploadScreen.js文件如下：
import React, { useState } from 'react';
import {
View,
SafeAreaView,
Text,
TouchableOpacity,
StyleSheet,
Platform,
Alert,
Image
} from 'react-native';
import * as ImagePicker from 'react-native-image-picker';
import storage from '@react-native-firebase/storage';
import * as Progress from 'react-native-progress';
export default function UploadScreen() {
const [image, setImage] = useState(null);
const [uploading, setUploading] = useState(false);
const [transferred, setTransferred] = useState(0);
const selectImage = () => {
const options = {
maxWidth: 2000,
maxHeight: 2000,
storageOptions: {
skipBackup: true,
path: 'images'
}
};
ImagePicker.launchImageLibrary(options, 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 };
console.log(source);
setImage(source);
}
});
};
const uploadImage = async () => {
const { uri } = image;
const filename = uri.substring(uri.lastIndexOf('/') + 1);
const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri;
setUploading(true);
setTransferred(0);
const task = storage()
.ref(filename)
.putFile(uploadUri);
// set progress state
task.on('state_changed', snapshot => {
setTransferred(
Math.round(snapshot.bytesTransferred / snapshot.totalBytes) * 10000
);
});
try {
await task;
} catch (e) {
console.error(e);
}
setUploading(false);
Alert.alert(
'Photo uploaded!',
'Your photo has been uploaded to Firebase Cloud Storage!'
);
setImage(null);
};
return (
<SafeAreaView style={styles.container}>
<TouchableOpacity style={styles.selectButton} onPress={selectImage}>
<Text style={styles.buttonText}>Pick an image</Text>
</TouchableOpacity>
<View style={styles.imageContainer}>
{image !== null ? (
<Image source={{ uri: image.uri }} style={styles.imageBox} />
) : null}
{uploading ? (
<View style={styles.progressBarContainer}>
<Progress.Bar progress={transferred} width={300} />
</View>
) : (
<TouchableOpacity style={styles.uploadButton} onPress={uploadImage}>
<Text style={styles.buttonText}>Upload image</Text>
</TouchableOpacity>
)}
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#bbded6'
},
selectButton: {
borderRadius: 5,
width: 150,
height: 50,
backgroundColor: '#8ac6d1',
alignItems: 'center',
justifyContent: 'center'
},
selectButton2: {
borderRadius: 5,
width: 150,
height: 50,
backgroundColor: '#8ac6d1',
alignItems: 'center',
justifyContent: 'center',
marginTop: 20
},
uploadButton: {
borderRadius: 5,
width: 150,
height: 50,
backgroundColor: '#ffb6b9',
alignItems: 'center',
justifyContent: 'center',
marginTop: 20
},
buttonText: {
color: 'white',
fontSize: 18,
fontWeight: 'bold'
},
imageContainer: {
marginTop: 30,
marginBottom: 50,
alignItems: 'center'
},
progressBarContainer: {
marginTop: 20
},
imageBox: {
width: 300,
height: 300
}
});
导致此警告的原因是什么以及如何修复它？
尝试修复
- AFTAB
const selectImage = () => {
const options = {
maxWidth: 2000,
maxHeight: 2000,
storageOptions: {
skipBackup: true,
path: 'images'
}
};
ImagePicker.launchImageLibrary(options, 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 uri = image?.uri;
console.log(source);
setImage(response);
}
});
};
结果：
- 拉赫曼
import React, { useState } from 'react';
import {
View,
SafeAreaView,
Text,
TouchableOpacity,
StyleSheet,
Platform,
Alert,
Image
} from 'react-native';
import * as ImagePicker from 'react-native-image-picker';
import storage from '@react-native-firebase/storage';
import * as Progress from 'react-native-progress';
export default function UploadScreen() {
const [image, setImage] = useState("");
const [uploading, setUploading] = useState(false);
const [transferred, setTransferred] = useState(0);
const selectImage = () => {
const options = {
maxWidth: 2000,
maxHeight: 2000,
storageOptions: {
skipBackup: true,
path: 'images'
}
};
ImagePicker.launchImageLibrary(options, 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 };
console.log(source);
setImage(source);
}
});
};
const uploadImage = async () => {
const { uri } = image;
const filename = uri.substring(uri.lastIndexOf('/') + 1);
const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri;
setUploading(true);
setTransferred(0);
const task = storage()
.ref(filename)
.putFile(uploadUri);
// set progress state
task.on('state_changed', snapshot => {
setTransferred(
Math.round(snapshot.bytesTransferred / snapshot.totalBytes) * 10000
);
});
try {
await task;
} catch (e) {
console.error(e);
}
setUploading(false);
Alert.alert(
'Photo uploaded!',
'Your photo has been uploaded to Firebase Cloud Storage!'
);
setImage("");
};
return (
<SafeAreaView style={styles.container}>
<TouchableOpacity style={styles.selectButton} onPress={selectImage}>
<Text style={styles.buttonText}>Pick an image</Text>
</TouchableOpacity>
<View style={styles.imageContainer}>
{image !== "" && image !== undefined && (
<Image source={{ uri: image?.uri }} style={styles.imageBox} />
)}
{uploading ? (
<View style={styles.progressBarContainer}>
<Progress.Bar progress={transferred} width={300} />
</View>
) : (
<TouchableOpacity style={styles.uploadButton} onPress={uploadImage}>
<Text style={styles.buttonText}>Upload image</Text>
</TouchableOpacity>
)}
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#bbded6'
},
selectButton: {
borderRadius: 5,
width: 150,
height: 50,
backgroundColor: '#8ac6d1',
alignItems: 'center',
justifyContent: 'center'
},
selectButton2: {
borderRadius: 5,
width: 150,
height: 50,
backgroundColor: '#8ac6d1',
alignItems: 'center',
justifyContent: 'center',
marginTop: 20
},
uploadButton: {
borderRadius: 5,
width: 150,
height: 50,
backgroundColor: '#ffb6b9',
alignItems: 'center',
justifyContent: 'center',
marginTop: 20
},
buttonText: {
color: 'white',
fontSize: 18,
fontWeight: 'bold'
},
imageContainer: {
marginTop: 30,
marginBottom: 50,
alignItems: 'center'
},
progressBarContainer: {
marginTop: 20
},
imageBox: {
width: 300,
height: 300
}
});
结果：
更新代码后控制台错误：
3个回答
1
投票
投票
您遇到问题：
ImagePicker.launchImageLibrary(options, 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 };
console.log(source);
setImage(source);
}
});
您必须将图像设置为：
setImage(response);
然后你可以这样得到它：
const uri = image?.uri;
0
投票
投票
显示警告是因为 URI 为空。确保您已正确获取 URL 响应并尝试此代码。
export default function UploadScreen() {
const [image, setImage] = useState("");
const [uploading, setUploading] = useState(false);
const [transferred, setTransferred] = useState(0);
const selectImage = () => {
const options = {
maxWidth: 2000,
maxHeight: 2000,
storageOptions: {
skipBackup: true,
path: 'images'
}
};
ImagePicker.launchImageLibrary(options, 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 };
console.log(source);
setImage(source);
}
});
};
const uploadImage = async () => {
const { uri } = image;
if (uri) {
const filename = uri.substring(uri.lastIndexOf('/') + 1);
const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri;
setUploading(true);
setTransferred(0);
const task = storage()
.ref(filename)
.putFile(uploadUri);
// set progress state
task.on('state_changed', snapshot => {
setTransferred(
Math.round(snapshot.bytesTransferred / snapshot.totalBytes) * 10000
);
});
}
try {
await task;
} catch (e) {
console.error(e);
}
setUploading(false);
Alert.alert(
'Photo uploaded!',
'Your photo has been uploaded to Firebase Cloud Storage!'
);
setImage("");
};
return (
<SafeAreaView style={styles.container}>
<TouchableOpacity style={styles.selectButton} onPress={selectImage}>
<Text style={styles.buttonText}>Pick an image</Text>
</TouchableOpacity>
<View style={styles.imageContainer}>
{image !== "" && image !== undefined && (
<Image source={{ uri: image?.uri }} style={styles.imageBox} />
)}
{uploading ? (
<View style={styles.progressBarContainer}>
<Progress.Bar progress={transferred} width={300} />
</View>
) : (
<TouchableOpacity style={styles.uploadButton} onPress={uploadImage}>
<Text style={styles.buttonText}>Upload image</Text>
</TouchableOpacity>
)}
</View>
</SafeAreaView>
);
}
0
投票
投票
你必须添加
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
在 AndroidMainfest.xml 文件中
最新问题
- 启动、停止和监视其他脚本的主脚本（Python Watchdog）
- VS Code 不对打字稿文件进行类型检查
- vue.js 新手，我如何将模型与组件分开
- 将volume_up_key_code 115从Raspberry Pi 5发送到iPhone
- 通过与别名的关联进行 Sequelize 分组（model->model2 AS 'alias'）
- 顺序访问大尺寸向量时是否可以减少缓存未命中？
- 如何在 Spring Data Rest 中保护 RepositoryRestResource
- 如何在登录 Astro 应用程序的同时注销 Shopify API？
- 在 ngx-charts-pie-chart 中添加图例项的链接？
- 签名 cookie 不存在时 Cloudfront 重定向
- 在 flutter 中每 x 小时显示一条通知
- django asgi 引发 django.core.exceptions.AppRegistryNotReady：应用程序尚未加载
- 滚动在 Angular ionic 中消失了
- Gitlab maven部署到包registry
- Laravel 11 模型中的数组到字符串转换
- 尝试安装opencve时遇到错误
- `ConversationSummaryBufferMemory` 未完全定义；你应该定义`BaseCache`，然后调用`ConversationSummaryBufferMemory.model_rebuild()`
- 如何在Gitlab中部署maven库依赖？
- Azure Blob 上传无法在 ASP .Net Core 应用程序中工作
- AWS EventBridge 规则中是否有通配符？
© www.soinside.com 2019 - 2024. All rights reserved.