واجهت مشكلة في رفع الصور باستخدام مكون vuetify الخاص بادخال الملفات
المشكلة كالتالي:
استخدم لمعالجة الصور cloudinary
في حال حدوث مشكلة في عملية التحميل (catch)
لا استطيع ادخال نفس الصورة لعملية المعالجة مرة اخرى
يمكن ذلك عبر طريقتين:
1- الضغط على زر clear ثم اختيار الصورة
2- اختيار صورة مختلفة ثم اختيار الصورة السابقة
شوف كود الجافاسكريبت هنا: https://codepen.io/team/Cloudinary/pen/QgpyOK
من أول السطر48
ممكن يفيدك
لا اعتقد المشكلة من cloudinary
اعتذر عن كتابة الاكواد لك.
file.vue
<ValidationObserver ref="observer" v-slot="{ validate, reset }" style="width:100%">
<v-flex md12>
<form>
<ValidationProvider v-slot="{ errors }" name="Image" rules="size:5000">
<v-file-input
accept="image/*"
@change="processImg($event)"
ref="myFileInput"
counter
label="Image"
placeholder="Select your image"
prepend-icon=""
append-icon="mdi-paperclip"
outlined
:show-size="1000"
:error-messages="errors"
>
<template v-slot:selection="{ text }">
<v-chip
color="primary"
dark
label
small
>
{{ text }}
</v-chip>
</template>
</v-file-input>
</ValidationProvider>
</form>
</v-flex>
</ValidationObserver>
file.js
<script>
export default {
data() {
return {
newProduct: {
img: null,
},
loadingImg: false,
}
},
computed: {
imageUpload() {
let imageURL = this.$store.getters.imageUpload;
this.newProduct.img = imageURL;
return imageURL;
}
},
methods: {
processImg(event) {
let file = event
this.loadingImg = true
this.$store.dispatch('imageUpload', file)
.then(res => {
this.loadingImg = false
})
.catch(err => {
// here i want clear input
this.newProduct.img = null
this.loadingImg = false
})
}
}
}
</script>
المشكلة في مكون vuetify في حال حدوث خطأ يبقى الملف في حقل الادخال.
اعتقد من الافضل ازالة هذا الملف عند حدوث مشكلة
حاولت استخدام
this.$refs.myFileInput.value = null
تنجح في المرة الاولى ولكنها تفشل في حال حدوث خطا للمرة الثاني, مع رسالة في الكونسل عند حدوث الخطا الاول
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “value”
بالعكس، ارفاق الكود هو نصف الحل 
هنحاول نجرب أكثر من طريقة
حابب أعرف الأول الcomponent => <ValidationProvider>
هذا custom component انت اللي عملته، صح؟ ولا 3rd party validation library
عشان vuetify components عندها الrules الخاصة بها
اعتذر عن التاخر في الرد, كنت مسافر
<ValidationProvider> الخاص بـVeeValidate وهي اضافة في vue
هي عبارة عن custom component تقدر تقرا عنها
http://vee-validate.logaretm.com/v2/concepts/components.html
ما هو الكلاوندري وفيما يستخدم؟
يستخدم لمعالجة الصور ويحفظها بالسيرفر، لتستطيع استعمال رابط الصورة
هل هو مجاني؟
هي خدمة مجانية, تقدر تطور حسابك بمبلغ وتاخذ بعض الميزات