图片上传下载-功能实现

文件上传下载

三种方式实现文件上传功能

1. 传统form表单(基本被废弃)

向后台发送数据的三种编码格式

—form表单的enctype属性

• application/x-www-form-urlencoded

  默认表单数据编码，在发送到服务器之前，所有字符都会进行编码（空格转换为 “+” 加号，特殊符号转换为 ASCII HEX 值）。格式：

  {
       user:z s,pwd:123} => user=z+s&pwd=123
  

  Content-Type: application/x-www-form-urlencoded
  

• multipart/form-data

  将表单中的数据变成二进制数据进行上传，不对字符编码。在使用包含 文件上传控件的表单 时，必须使用该值。格式：

  {
       user:z s,pwd:123,file:test.txt} => 
  ------WebKitFormBoundary2zCBIZMMAJmEO32J
  Content-Disposition: form-data; name="user"
  
  z s
  ------WebKitFormBoundary2zCBIZMMAJmEO32J
  Content-Disposition: form-data; name="pwd"
  
  123
  ------WebKitFormBoundary2zCBIZMMAJmEO32J
  Content-Disposition: form-data; name="file"; filename="test.txt"
  Content-Type: text/plain
  
  我是test.txt的内容
  ------WebKitFormBoundary2zCBIZMMAJmEO32J--
  
  

  Content-Type: multipart/form-data; boundary=----WebKitFormBoundary2zCBIZMMAJmEO32J
  

• text/plain

  以纯文本形式进行编码，其中不含任何控件或格式字符。格式：

  {
       user:z s,pwd:123} => 
  user=z s
  pwd=123
  

  Content-Type: text/plain
  

2. ajax发送FormData数据格式(两种方式性能差异不大,均常用)

服务器: 接收到客户端传递的文件信息，创建文件并返回客户端存储的文件地址

a. 限制上传文件MIME TYPE

 <!-- 非图片类型的文件变灰无法被点击 -->
 <input type="file" id="fileInp" accept="image/*">

let limitType = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif']
if (!limitType.includes(file.type)){
   
     alert('不支持的上传格式！')
     fileInp.value = ''