vue.js - 如何验证多个文件的最大文件大小为每个文件 2 mb？ (验证)

Question

我正在尝试在 Vuetify 的 v-file-input 上设置验证规则将文件大小限制为 2MB，但当我选择 2MB 以下的文件时，验证错误地失败(并且出现输入错误)。

摘自我的 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>