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

Posted 2023-02-16

【中文标题】VueJS - 在表单文件上传中验证文件大小要求

【英文标题】：VueJS - Validate file size requirement in form file upload

【发布时间】：2019-02-08 02:41:33

【问题描述】：

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

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

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

的解决方案

【问题讨论】：

验证，尤其是这种类型的验证，应该在接收服务器上执行，错误由客户端发回和显示。客户不应该负责验证用户输入；请记住，您的应用程序并不是通往服务器的唯一大门。

@Marty 是的，谢谢我没有考虑其他客户的可能性。但是你所说的“......特别是这种类型的验证......”是什么意思？服务器验证更可取的文件有什么不同？我的意思是它甚至需要上传本来可以避免的文件。

上传文件比纯文本输入有更多的安全考虑。

【参考方案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>

【讨论】：

谢谢你的回答，但你为什么说“..它不提供任何安全性”。以这种方式检查文件大小是否存在一些与安全相关的缺点？

我的意思是，可以在网络浏览器之外向您的服务器发出相同的请求，例如使用cURL，攻击者可以通过这种方式发送一个巨大的文件。这就是服务器必须验证请求的原因。

文件名@DecadeMoon怎么样，想查看文件名只是为了查看图片？