VueJS - 验证表单文件上传中的文件大小要求

Question

我正在使用 Bootstrap Vue 表单制作一个简单的表单，用户可以在其中上传文件。有没有办法验证使用 Vue 表单选择的文件的大小？

我想阻止用户上传此类文件。

我见过这个解决方案，但看起来它包含一些第三方插件。我更喜欢没有的解决方案

Answer 1

这是一个通用的 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>