如何验证多个文件的最大文件大小为每个文件2MB？(宣传)
如何验证多个文件的最大文件大小为每个文件2MB？(宣传)
提问于 2020-02-07 07:06:00
我试图在Vuetify的v-file-input上设置一个验证规则，将文件大小限制为2MB，但是当我选择2MB以下的文件时，验证失败了(并且出现了输入错误)。
我的科德芬节选
<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>我该如何解决这个问题？
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-02-07 08:08:42
问题是您的v-file-input接受多个文件，所以验证规则的参数实际上是一个File对象数组(即使只选择一个文件)。规则函数应该类似于以下内容：
files => !files || !files.some(file => file.size > 2e6) || 'Avatar size should be less than 2 MB!'该规则在files数组上使用files来确定是否有任何文件大小在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>
Stack Overflow用户
发布于 2020-02-07 07:12:19
好吧，我还没试过，但像这样的东西应该能用。在上传方法中，循环输入文件并检查它们是否都在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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60108629
复制相关文章
相似问题
腾讯云开发者
