【前端】如何实现大文件上传

ANKG

于 2020-06-10 23:24:04 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zhangank/article/details/106675368

前端理论专栏收录该内容

20 篇文章

订阅专栏

本文探讨了两种主要的大文件上传方法：传统的form表单提交及现代的ajax请求方式。阐述了直接传文件和采用数据流文件传输的具体步骤，包括客户端如何通过post请求发送文件，以及服务器端如何接收并存储这些文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、理论

大文件上传：可能是图片、文件等。

二、大文件上传思路

思路一：form表单提交方式（不常用）；
早期利用form表单元素，上传文件，利用action、method、enctype属性实现文件上传，必须为multipart/form-data、post请求；

<form action="https://www.baidu.com" method="post" enctype="multipart/form-data">
  <div>
     <span>照片：</span>
     <input type="file" name="" id="" name="file">
   </div>
</form>

思路二：ajax请求方式（比较多）；
方案1、直接传文件
第一步：客户端利用post请求，采用FormData数据格式直接将文件file传给服务器；
第二步：服务器接收到客户端传递的file等信息，在服务器端创建file文件，并把服务器端存储文件的地址返回给客户端。

方案2、采用数据流文件传
第一步：传递给服务器的是BASE64编码（图片）、二进制编码流文件（文件）；
第二步：（例如）服务器端接收到base64信息，把base64转换为具体的图片存储，并返回存储图片的地址。