VueJS - проверка требований к размеру файла при загрузке файла формы - PullRequest
Новая
       11

VueJS - проверка требований к размеру файла при загрузке файла формы

0 голосов
/ 03 сентября 2018

Я использую форму Bootstrap Vue, чтобы создать простую форму, в которую пользователь может загрузить файл. Есть ли способ проверить размер файлов, выбранных с помощью формы Vue?

Я хочу запретить пользователю загружать такие файлы.

Я видел это решение, но похоже, что оно включает какой-то сторонний плагин. Я предпочитаю решение, которое не

1 Ответ

0 голосов
/ 03 сентября 2018

Вот общий пример Vue того, как проверить размер файла перед отправкой формы.

Суть в том, чтобы получить объект файла из свойства files на самом входе и проверить размер файла через свойство size; остальное - просто материал, связанный с предотвращением отправки формы в случае сбоя проверки.

Само собой разумеется, но важно, чтобы любые проверки входных данных, такие как эта, выполнялись в первую очередь на сервере; проверка на стороне клиента улучшает взаимодействие с пользователем, но не обеспечивает безопасность. 

new Vue({
  el: '#app',
  methods: {
    onSubmit(e) {
      const file = this.$refs.file.files[0];
      
      if (!file) {
        e.preventDefault();
        alert('No file chosen');
        return;
      }
      
      if (file.size > 1024 * 1024) {
        e.preventDefault();
        alert('File too big (> 1MB)');
        return;
      }
      
      alert('File OK');
    },
  },
});
<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>

<div id="app">
  <form @submit="onSubmit">
    <input type="file" ref="file">
    <button type="submit">Submit</button>
  </form>
</div>
...