如何验证多个文件的最大文件大小为每个文件 2 mb? (验证)
Posted
技术标签:
【中文标题】如何验证多个文件的最大文件大小为每个文件 2 mb? (验证)【英文标题】:How can I validate the maximum file size is 2 mb per file for multiple files? (vuetify) 【发布时间】:2020-05-23 07:20:16 【问题描述】:我正在尝试在 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>
我该如何解决这个问题?
【问题讨论】:
【参考方案1】:问题是您的v-file-input
接受多个文件,因此验证规则的参数实际上是File
对象的数组(即使只选择了一个文件)。规则函数应该如下所示:
files => !files || !files.some(file => file.size > 2e6) || 'Avatar size should be less than 2 MB!'
该规则使用files
数组上的Array.prototype.some
来确定是否有任何文件大小超过2 * 10^6
。但是,由于文件大小是以字节为单位的,我建议改为与 2MiB 进行比较(即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>
【讨论】:
【参考方案2】:嗯,我还没有测试过,但是这样的东西应该可以工作。在您的上传方法中,循环输入文件并检查它们是否都低于 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;
【讨论】:
以上是关于如何验证多个文件的最大文件大小为每个文件 2 mb? (验证)的主要内容,如果未能解决你的问题,请参考以下文章