VueJS - 验证表单文件上传中的文件大小要求
VueJS - Validate file size requirement in form file upload
我正在使用 Bootstrap Vue 表单制作一个用户可以上传文件的简单表单。有没有办法验证使用 Vue 表单选择的文件的大小?
我想阻止用户上传此类文件。
我看过 解决方案,但看起来它包含一些第三方插件。我更喜欢不
的解决方案
这是一个通用的 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>
我正在使用 Bootstrap Vue 表单制作一个用户可以上传文件的简单表单。有没有办法验证使用 Vue 表单选择的文件的大小?
我想阻止用户上传此类文件。
我看过
这是一个通用的 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>