图片上传和预览踩坑

功能需求

• 1.完成图片的上传和上传之后图片的预览功能

遇到的问题

• 1.使用html的src标签,可以直接发送请求。
  • 通过html标签直接发送的请求没有办法添加header（a、img、form）
  • 因此如果服务器需要check你的Headers中的Authorization来确定是否给当前请求提供服务，那么通过标签发送的请求必然不能被授予服务
• 2.图片的上传需要给服务器发送post请求，那么post请求的Headers以及body要求是什么呢？

完成功能

使用expressjs 作为服务器处理图片上传和预览。使用antd上传组件。

• Q1：使用了antd upload组件本身带的上传功能，那么如何确定请求的路径headers以及body呢？

• A1: Upload组件本身带了很多属性

  • action：确定上传的路径
  • headers：确定上传请求的headers
  • name：确定了后端抓取文件需要访问的字段
  • body：如果你没有改写上传的方法 body是确定的

    { 
      fieldname: 'file',
      originalname: 'WechatIMG378.jpeg',
      encoding: '7bit',
      mimetype: 'image/jpeg'
    }
    

• Q2:如何在文件上传之前check文件的类型和大小？

• A2:antd的Upload组件包含属性beforeUpload function这个函数会在上传前被调用并且传入上传文件的对象file作为参数

  • file.size: 以bytes为单位。
    • 例子：要求文件大小小于3M
      • file.size / 1024 / 1024 < 3
  • file.type: 指的是文件发送的类型
    • 例子：'image/jpeg', 'image/jpg', 'image/png', 'image/bmp'

• Q3: 对于图片预览部分我们不能直接使用img src，那么我们该怎么办？

• A3:

  • 首先src的值可以是什么呢？
    • 1.是一个被webpack打包好的图片
    • 2.是一个可以请求到图片的路径
    • 3.是图片的base64编码

    • 但是前两种方式都是通过发请求获取的

  • 这两种方式的区别
    • url：
      • 1.需要发送一次请求
      • 2.如果图片文件的所有信息都不变俺么将会被缓存在浏览器中
    • base64：
      • 1.不需要发送请求直接内嵌在html中
      • 2.不能被浏览器缓存
      • 3.当图片尺寸小的时候我们会选择使用这种方式，不占用一次http的会话
  • 因此我们可以采用发送ajax请求获取图片的编码
  • 将base64赋给img src即可

• Q4: 对于请求一个图片（文件）的情况，这些图片和文件是以什么样的模式在传输呢？为什么浏览器可以直接展示出图片？

• A4: 图片和文件都是以二进制流传输的（或者可以说是文件对象的原始数据）,浏览器可以直接将从服务器接受的二进制流自动转换成对应的文件和图片

---

• Q5:客户端接受服务器传来的多类型数据又是如何被浏览器识别并处理的呢？（浏览器怎么知道该如何处理二进制数据流或者对象呢）
• A5: 首先需要知道MIME类型：
  • 是一种通知客户端其接收文件的多样性的机制
  • 服务器会在response的Content-Type设置当前response body的MIME type
  • 当浏览器接收到请求的时候会根据MIME type使用相应的方式进行对数据的处理
  • 举个栗子
    • 在img 的src中设置一段请求静态图片的路径
    • express.js做服务器 res.sendFile
    • 浏览器查看请求信息
    • 再次查看请求的信息发现response headers的content-type是image/jpeg
    • response body是一个二进制数据流
    • 因此浏览器通过识别出content-type是image/jpeg然后采用对图片的处理机制去处理图片并生成
  • 和问题相关
    • 因此当你使用ajax发送请求获取图片，可以获取图片的二进制流
    • 但是没有方法处理这个二进制流
    • 所以没有办法展示图片

---

• Q5: 客户端该如何处理返回的二进制流并将其转换成base64编码呢？
• A5：首先得让服务器返回一个你知道如何转换的二进制流（让返回的数据类型已知可控）
  • 对于不同的发送请求的方式，我们都有一个方法可以设置返回的数据类型
    • 举个栗子：使用axios发送请求

      axios.get('/****',{
          responseType: 'blob'
      })
      

  • 响应的类型（responseType的类型）：
    • document: 静态页面
    • blob:适用于读取二进制数据，比如图片文件
    • arrayBuffer：也是用来处理处理二进制数据但是是按照数组的方式处理二进制数据
    • json： 数据，虽然和text差不多但是最大的优点可以使用JSON.parse将string变成对象
    • text: 字符串
      • 默认值是json
  • 这时候知道了返回的数据一定是一个blob类型的数据就可以想办法将blob数据读成base64即可

---

• Q7:responseType的blob和arraybuffer之间的区别是什么呢？
• A7:都是二进制数据的容器，那么对于这种二进制流的数据我们该选择转换成哪一种容器呢？
  • blob：
    • 代表原始的二进制数据（js都不一定认得）
    • blob更偏重于整体操作（整个文件的二进制流）
  • arrayBuffer：
    • js可以识别的二进制数据
    • 可以做流的切割，所有注重于对二进制流中的字节进行处理
  • 因此在这里，我们更加偏重于对整个图片二进制流的处理因此选择将response转换成一个blob

---

• Q8:如何将blob转换成base64给src赋值呢？
• A8:FileReader可以将blob或者file类型的数据装换成其他类型读出
  • FileReader
  • 创建一个FileReader对象new FileReader()
  • 然后调用fileReader.readAdDataUrl(blob)
  • 将后端传回的url直接转成src的value
  • 但是fileReader的方法都是异步的
  • 因此需要定义一个回调函数
  • fileReader.onLoad((e)=>{
    //onload会在读取成功的时候执行
    document.createElement('img').src = e.target.result;
    })

发现js中文件的处理部分还是很不熟悉js文件和二进制流的处理