Как я могу проверить, максимальный размер файла составляет 2 МБ на файл для нескольких файлов? (Vuetify)

Question

Я пытаюсь настроить правило проверки на v-file-input в Vuetify, чтобы ограничить размеры файлов до 2 МБ, но проверка некорректно завершается неудачно (и появляется ошибка ввода), когда я выбираю файлы размером менее 2 МБ.

Выдержка моего Codepen :

<v-file-input
  multiple
  :rules="rules"
  accept="image/jpg, image/jpeg, application/pdf"
  placeholder="Pick an avatar"
  prepend-icon="mdi-camera"
  label="Avatar"
></v-file-input>

<script>
  //...
  data: () => ({
    rules: [
      value => !value || value.size < 2000000 || 'Avatar size should be less than 2 MB!',
    ],
  }),
  //...
</script>

Как мне решить эту проблему?

Answer 1

Проблема в том, что ваш v-file-input принимает несколько файлов, поэтому аргументом правила проверки на самом деле является массив File объектов (даже если выбран только один файл). Функция правила должна выглядеть примерно так:

files => !files || !files.some(file => file.size > 2e6) || 'Avatar size should be less than 2 MB!'

Правило использует Array.prototype.some в массиве files, чтобы определить, превышает ли какой-либо из размеров файла 2 * 10^6. Однако, поскольку размеры файлов выражены в байтах, я рекомендую вместо 2 MiB (т.е. 2 * 1024 * 1024 = 2_097_152).

Демонстрация:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    rules: [
      files => !files || !files.some(file => file.size > 2_097_152) || 'Avatar size should be less than 2 MB!'
    ],
  }),
})

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuetify@2.2.11/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.2.11/dist/vuetify.min.css">
<link rel="stylesheet" href="https://unpkg.com/@mdi/font@4.9.95/css/materialdesignicons.min.css">

<div id="app">
  <v-app id="inspire">
    <v-file-input
      multiple
      :rules="rules"
      accept="image/jpg, image/jpeg, application/pdf"
      placeholder="Pick an avatar"
      prepend-icon="mdi-camera"
      label="Avatar"
    ></v-file-input>
  </v-app>
</div>

Answer 2

Ну, я не проверял это, но что-то вроде этого должно работать. В вашем методе загрузки l oop через входные файлы и проверьте, все ли они ниже 2mb:

const input = event.target
let files = input.files
//loop through this to check all the file sizes.
const isLt2M = files[0].size / 1024 / 1024 < 2;