آموزش Validation آپلود فایل بوسیله Vue.js

قبل از شروع به کدنویسی چند نکته را یادآور می شوم. کار آپلود را عملا vue.js انجام نخواهد داد و شما در action فرم مربوطه اطلاعات را به صفحه دیگری هدایت می کنید که ممکن است با هر زبان دیگری مانند PHP مدیریت شود. در این آموزش ما به این نکته می پردازیم که فایل قبل از ارسال به سرور و در مرورگر کاربر به وسیله Vue.js اعتبارسنجی و یا validate شود. که یکی از مزیت های این کار، کاربر پسند شدن فرم است. با این روش سرعت کار بسیار بالا می رود و کاربر منتظر رفت و برگشت اطلاعات نیست.

نکته دیگری که باید یادآوری کنم این است که validation فرم بوسیله Vue.js امنیت فرم شما را 100 درصد کامل نمی کند و شما علاوه بر Vue.js باید با زبان برنامه نویسی دیگری مانند PHP کار اعتبار سنجی را مجددا انجام دهید.

خوب برویم سراغ اصل مطلب، فرض کنید یک فرم جهت دریافت اسناد مختلف طراحی کرده اید. این فرم قابلیت دریافت چندین عکس و یا فایل را دارد که این امکان به دلیل استفاده از multiple می باشد.کدهای مربوط به فرم به شکل ذیل می باشد.

<div id="app">
<form action="#">
<label class="btn btn-xs btn-primary">
    <input type="file" name="pics" id="12" @change="onFileChangePic" multiple/>
</label>
<div><input type="submit" value="submit" :disabled="btnstatus == false"></div>
</form>
</div>

و کدهای مربوط به Vue.js به این شکل است

const app = new Vue({
  el: '#app',
  data: {
    btnstatus:false
  },
  methods:{
      onFileChangePic(event){
        let isGoodToGo = true
        let files = event.target.files
        for (let i=0; i<files.length; i++) {
          let file = files[i]
          if(file.type != 'application/pdf'){
            isGoodToGo = false
         }
        }
        this.btnstatus = isGoodToGo
      }
  }
})

کدهای مربوط به Vue.js کاملا مشخص است. شما اطلاعات مربوط به فایل ها را گرفته و در یک حلقه نوع فایل را بررسی می کنید (که در این قسمت باید فایل ها PDF باشد). در صورتی که تمامی فایل ها PDF باشد دگمه Submit فعال خواهد شد.

Validation دو فیلد آپلود با نام های جداگانه

خوب حالا شرایط دیگری را بررسی کنیم. فرض کنید دو فیلد فایل داریم که برای هر کدام نام های جداگانه ای انتخاب کرده ایم. در مثال قبلی فایل ها را به صورت دسته جمعی و یکجا دریافت می کردیم ولی در این مثال می خواهیم دو فایل را به صورت جداگانه و بسته به نام های آنها دریافت کنیم.

کدهای مربوط به فرم به این شکل می باشد.

<div id="app">
<form action="#">
<label class="btn btn-xs btn-primary">
    <input type="file" ref="pic1" name="pic1" id="12" @change="onFileChangePic" />
    Upload file
</label>
{{fileName}}
<br>
<label class="btn btn-xs btn-primary">
    <input type="file" ref="pic2" name="pic2" id="12" @change="onFileChangePic" />
    Upload file
</label>
{{fileName2}}
<div><input type="submit" value="submit" :disabled="btnstatus == false"></div>
</form>
</div>

و کدهای مربوط به Vue.js به این شرح است.

const app = new Vue({
  el: '#app',
  data: {
    fileName:null,
    fileName2:null,
    btnstatus:false
  },
  methods:{
      onFileChangePic(event){
         var fileData = this.$refs.pic1.files[0];
         this.fileName=fileData['name'];

         var fileData2 = this.$refs.pic2.files[0];
         this.fileName2=fileData2['name'];
      
         if(fileData['type'] == 'application/pdf' && fileData2['type'] == 'application/pdf'){
            this.btnstatus=true
         }else{
            this.btnstatus=false
         }
      }
  }
})

تنها نکته کلیدی این مثال this.$refs.XX.files[0] می باشد. که برای XX نام مربوط به هر فیلد می باشد.

Validation دو فیلد آپلود با نام های جداگانه

دیدگاهتان را بنویسید لغو پاسخ