मैं एक Vue-प्रोजेक्ट में बूटस्ट्रैप-व्यू घटक का उपयोग कर रहा हूं जिसमें "इमेज/*" के लिए स्वीकृत प्रोप सेट है। यह ब्राउज-बटन के साथ ठीक काम करता है, लेकिन मैं अभी भी सभी प्रकार की फाइलों को फाइल-फॉर्म में छोड़ सकता हूं और यह इसे स्वीकार करता है। क्या यह बग है या मैं कुछ भूल गया हूं?

<b-form-file
   accept="image/*"
   v-model="file"
   :state="null"
   placeholder="Choose a file or drop it here..."
   drop-placeholder="Drop file here..."
></b-form-file> 
2
stanleyyyyyy 1 अप्रैल 2020, 13:22

1 उत्तर

सबसे बढ़िया उत्तर

बूटस्ट्रैप-वू का <b-form-file> घटक, एक देशी <input type="file"> तत्व के लिए एक आवरण है। जहां input दिखाई नहीं दे रहा है और इसके बजाय एक अनुकूलित लेबल दिखाता है, लेकिन फिर भी फ़ाइल हैंडलिंग के लिए इनपुट का उपयोग करता है।

इसका मतलब है कि यह मूल इनपुट की तरह ही काम करेगा, जो इसमें कुछ भी गिराने की अनुमति देता है। accept="image/*" applied होने पर भी। (कम से कम क्रोम में)

जब आपका v-model सही प्रारूप में है, तो यह सुनिश्चित करने के लिए आपको शायद कुछ मैन्युअल सत्यापन करने की आवश्यकता होगी।

उदाहरण के लिए आप इनपुट को रीसेट करने के लिए एक watcher बना सकते हैं यदि यह एक अमान्य फ़ाइल है।

watch: {
  file(newFile) {
    if(newFile && !newFile.type.startsWith("image/")) {
      this.$nextTick(() => {
        this.file = null;        
      })
    }
  }
}
4
Hiws 1 अप्रैल 2020, 11:45