前端文件上传限制

问题起因

前端限制了文件类型.jpg,.png,.jpeg 发现客户上传了pdf文件。

前端代码

# Ant Design Vue  Upload组件
<Upload :fileList="list" :customRequest="uploadFile" :multiple="true"         accept=".jpg,.png,.jpeg"
    @remove="removeItem" @change="changeFile">
    <Button icon="upload">上传附件</Button>
</Upload>

自己一直以来错误的想法

前端允许上传的文件类型可以通过定义accept来限制

实际上

前端在文件上传框里的文件限制

accept 定义的只是绿色箭头标注的地方, 用户依旧可以通过选择红色箭头标选的所有文件,来上传accept定义的文件类型外的文件

问题

想看看大伙儿纯前端限制文件类型是通过哪些方式实现的?

《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 6

ant 可以在上传之前拦截判断 beforeUpload

2周前 评论
fofome (楼主) 2周前

永远不要相信来自前端的输入。

对于前端而言,在上传前,得到的 files 属性是个数组,可以遍历过滤掉。

2周前 评论

对于前端,可以在上传之前再次校验文件属性,对于后端,可以通过文件头检验文件类型,前端用于优化体验降低错误请求,后端则是最后把关,尤其后端至关重要,楼上说得对,永远不要相信来自前端的输入。

2周前 评论

file

也不排除 将 pdf 扩展名改成 jpg

 inputFile = document.querySelectorAll('input[type="file"]');
// 当文件被选中时进行检查
inputFile.addEventListener('change', function() {
  // 获取文件列表
  const files = this.files;

  if (files.length > 0) {
    // 获取文件的MIME类型
    const fileType = files[0].type;


    // 检查文件类型是否是你想要的类型
    if (fileType === 'image/jpeg' || fileType === 'image/png') {
      console.log('文件类型正确',fileType,files[0]);
      // 文件类型符合要求的处理逻辑
    } else {
      console.log('不支持的文件类型',fileType);
      // 文件类型不符合要求的处理逻辑
    }
  }
});

不清楚是否准确,懂点代码,但不是前端

PS: 根据文件前面 4 字节编码判断的文件类型才准确。不知道 js 是否可以实现

2周前 评论
梦想星辰大海

前端能做的只是提高伪造门槛,彻底防御还得是后端重绘。

2周前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!