Question

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

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

我看过this解决方案，但看起来它包含一些第三方插件。我更喜欢一个不会的解决方案

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>

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

1 个答案: