上传到Firebase时如何防止重复图像? [英] How to prevent duplicate images when uploaded to firebase?
问题描述
当我想将图像上传到Firebase(实时数据库和存储)时遇到一些问题,在实时数据库中,Images对象具有一个图像作为默认图像,并且我不想覆盖当我上传其他图像时,我使用了散布运算符 ... ,因此,当我选择一张图像时,
这样,
/ strong>,然后单击以上传它们,它可以正常工作并保存,没有重复,但是当我选择两个或多个时,它们上传后至少看到两个图像重复,那么如何解决这些问题?
I have some issue when I want to upload images to firebase (real-time database & storage), in real-time DB, I have Images object has one image as the default, and I don't want to overwrite when I upload other images so I used spread operators ...,
SO,
when I pick One Image and click to upload them it's work and saved without duplicated, but when I pick two or more I see at least two images duplicate after they uploaded so how can I solve these?
结构
这是我的函数 _SaveImagesToFirebase
class GalleryScreen extends Component {
constructor(props) {
super(props);
this.state = {
images: [],
newImages: []
};
}
pickMultiple = () => {
ImagePicker.openPicker({
width: 300,
height: 400,
multiple: true,
cropping: true
})
.then(img => {
this.setState({
newImages: img.map(i => {
return {
uri: i.path,
width: i.width,
height: i.height,
mime: i.mime
};
})
});
})
.then(() => this._SaveImagesToFirebase())
.catch(e => console.log(e));
};
_SaveImagesToFirebase = () => {
const uid = firebase.auth().currentUser.uid; // Provider
const { newImages } = this.state;
const provider = firebase.database().ref(`providers/${uid}`);
let imagesArray = [];
newImages.map(image => {
let file = image.uri;
const path = "Img_" + Math.floor(Math.random() * 1500);
const ref = firebase
.storage()
.ref(`provider/${uid}/ProviderGalary/${path}`);
ref.put(file).then(() => {
ref
.getDownloadURL()
.then(images => {
imagesArray.push({
uri: images
});
console.log("Out-imgArray", imagesArray);
})
.then(() => {
provider
.update({
Images: [...this.state.images, ...imagesArray] // Here is the issue
})
.then(() => console.log("done with imgs"));
});
});
});
setTimeout(() => {
console.log("timeout", this.state.images);
}, 8000);
};
componentDidMount() {
const uid = firebase.auth().currentUser.uid;
firebase
.database()
.ref(`providers/${uid}`)
.on("value", snapshot => {
let uri = snapshot.val().Images;
let images = [];
Object.values(uri).forEach(img => {
images.push({ uri: img.uri });
});
this.setState({ images });
});
}
render() {
return (
<View style={styles.container}>
{this.state.images.length === 0 ? (
<View
style={{
flex: 1,
// alignSelf: "center",
backgroundColor: "#fff"
}}
>
<Text
style={{
alignSelf: "center",
padding: 10,
fontSize: 17,
color: "#000"
}}
>
Please upload images
</Text>
</View>
) : (
<FlatList
numColumns={2}
key={Math.floor(Math.random() * 1000)}
data={this.state.images}
style={{
alignSelf: "center",
marginTop: 10
}}
renderItem={({ item }) => {
return (
// <TouchableOpacity style={{ margin: 5, flexGrow: 1 }}>
// <View>
// <Lightbox underlayColor="#fff" backgroundColor="#000">
// <Image
// key={Math.floor(Math.random() * 100)}
// source={{ uri: item.uri }}
// style={{
// alignSelf: "center",
// borderRadius: 15,
// width: width / 2 - 17,
// height: 200
// }}
// width={180}
// height={200}
// resizeMethod="scale"
// resizeMode="cover"
// />
// </Lightbox>
// </View>
// </TouchableOpacity>
<TouchableOpacity
key={Math.floor(Math.random() * 100)}
style={{
margin: 5,
width: width / 2 - 17,
height: 200
}}
>
<Lightbox
style={{ flex: 1 }}
underlayColor="#fff"
backgroundColor="#000"
>
<Image
source={{ uri: item.uri }}
style={{
borderRadius: 15,
width: "100%",
height: "100%"
}}
resizeMethod="auto"
resizeMode="cover"
/>
</Lightbox>
</TouchableOpacity>
);
}}
keyExtractor={(item, index) => index.toString()}
/>
)}
<TouchableOpacity
onPress={() => this.pickMultiple()}
style={{
alignSelf: "flex-end",
width: 57,
height: 57,
right: 10,
bottom: 80,
justifyContent: "center",
alignItems: "center",
borderRadius: 100,
backgroundColor: "#fff"
}}
>
<Icon name="ios-add-circle" size={70} color="#2F98AE" />
</TouchableOpacity>
</View>
);
}
}
export default GalleryScreen;
推荐答案
首先,创建一个合并函数,使用按键重复(在您的情况下为 uri
字段)
First, create a merging function that manipulate the arrays with duplicates by key (in your case uri
field)
function extractUniques(key, array) {
const dic = {}
for (const item of array) {
dic[item[key]] = item
}
return Object.values(dic)
}
现在在心中使用它
provider.update({
Images: extractUniques('uri', [...this.state.images, ...imagesArray]) // Here is the issue
})
这篇关于上传到Firebase时如何防止重复图像?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!