JavaScript is required
Back

文件上传的技术纲要

Sep 01, 2023

文件上传是前端网络这一块一个非常重要的场景,在不同的公司或者是同一个公司的不同需求下,可能实现的方式都会不一样了,所以在此举一个例子,它可以上传单个文件也可以上传一个文件夹,也可以上传多个文件限制一下文件的数量、使用卡片式的方式依次上传、拖动上传、对大文件进行分片上传并显示上传进度以及在上传图片的时候对图片进行裁剪等。

在我们常见的学习方式中,有两种方式它一定是错误的,

  1. 场景
  • 场景(∞)
  • 学习量巨大
  • 难以满足定制化需求
  • 难以调试 bug
  • 学习量大

正确的学习方式

  1. 理解原理
  2. 原生实现
  3. 提升效率(第三方库)

文件上传的核心逻辑

  • 客户端:样式、交互逻辑、运算
  • 网络协议:消息格式、传输方式
  • 服务器:存储、安全、访问控制

对于我们前端开发者而言,服务器我们不太需要管(一般由后端完成),而样式和交互逻辑是我们已经掌握了的 CSS 和 JS,所以我们需要学的就只有客户端的运算和网络协议了。