Блог

Мне нужно ввести допустимые файлы программным способом, а затем что-то сделать:

 <template>
<ValidationObserver
 ref="form"
 tag="form"
 type="form"
 autocomplete="off"
 @submit.prevent="submit()"
>
<div class="box-body">
  <div class="row">
    <div class="col-lg-8 col-md-6 col-xs-12">
      <ValidationProvider
        v-slot="{ errors, validate }"
        rules="ext:csr"
        ref="csr"
        :name="$t('central_system.administration.ssl_certifications.csr').toLowerCase()"
      >
        <div
          class="form-group"
          :class="{'has-error': errors.length}"
        >
          <label for="csr">{{ $t('central_system.administration.ssl_certifications.csr') }}</label>
          <input
            id="csr"
            required
            type="file"
            @change="validate"
            @blur="getCsrInfo($event,'csr')"
          >
          <FormErrorSpan :errors="errors" />
        </div>
      </ValidationProvider>
      .
      .
      .
      <script>
      import { ValidationObserver, ValidationProvider, extend } from 'vee-validate'
      import { required, confirmed, integer, ext } from 'vee-validate/dist/rules'
      import FormErrorSpan from '@/components/Base/templates/forms/FormErrorSpan'
      .
      .
      .
        methods: {
             async getCsrInfo(event, certyficateItem) {

             //UNFORTUNATELLY THIS ALWAYS RETURN TRUE
             console.log(await this.$refs.csr.validate())

            SSLCertificatesAPI
           .getCsrInfo(event.target.files[0])
           .then(data => {
            this.previewFn(data.data.info)
            this.getFileContent(event, certyficateItem)
        })
     },
     .
     .
     .
 

Как я понимаю, если это.$refs.csr.validate() вернет мне значение false, то файл имеет неправильное расширение. но, к сожалению, это всегда так.
Я попытался вызвать validate и getCsrInfo($event, «csr») в одном @change, но проверка тогда тоже не работала.

Я понял!Я обнаружил, что метод проверки в @input отлично работает здесь.

   <ValidationProvider
    v-slot="{ errors, validate }"
    rules="ext:csr"
    ref="csr"
    :name="$t('central_system.administration.ssl_certifications.csr').toLowerCase()"
  >
    <div
      class="form-group"
      :class="{'has-error': errors.length}"
    >
      <label for="csr">{{ $t('central_system.administration.ssl_certifications.csr') }}</label>
      <input
        id="csr"
        required
        type="file"
        //THATS WORK
        @input="validate"
        @change="getCsrInfo($event,'csr')"
      >
      <FormErrorSpan :errors="errors" />
    </div>
  </ValidationProvider>