في هذا الجزء من الكود أعرض الصور التي تم رفعها:
<div class="form-group d-flex pt-2">
<div class="p-1" v-for="(image, index) in product.images" :key="index">
<div class="img-small-wrap">
<img v-if="image" :src="image" :alt="product.name" width="80px">
<span class="delete-img" @click="deleteImage(image, index)">X</span>
</div>
</div>
</div>
وحسب فهمي للـ documentation حددت دالة مسح الصور كالتالي:
deleteImage(img, index) {
var storage = fbAuth.storage();
var storageRef = storage.ref();
let image = storageRef.child(img);
this.product.images.splice(index, 1);
image.delete().then(()=> {
console.log('Image deleted');
}).catch((err)=>{
console.log(err);
});
علما بأن الصور تم رفعها كروابط داخل array بهذه الكيفية:
uploadImage(e){
if (e.target.files[0]) {
let file = e.target.files[0];
var storageRef = fbAuth.storage().ref('products/' + file.name);
var uploadTask = storageRef.put(file);
uploadTask.on('state_changed', (snapshot) =>{
}, (error) => {
// Handle unsuccessful uploads
}, () => {
// Handle successful uploads on complete
// For instance, get the download URL: https://firebasestorage.googleapis.com/...
uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
this.product.images = this.product.images || [];
this.product.images.push(downloadURL);
console.log('File available at', downloadURL);
// console.log(this.product.images)
});
});
}
},
جربت إيقاف دالة المسح وعمل كونسول لكل صورة:
أعتقد انه من الممكن ان تكون [object Object]هي سبب ما يظهر كالتالي:
