前后端处理不同类型文件的方式

前情提要

一般情况下，浏览器跟nodejs端（后端）的数据传输格式为：application/json。除此之外，Http content-type的可取值还有：

Type	Values	文件扩展名
Application	-
-	application/EDI-X12
-	application/EDIFACT
-	application/javascript
-	application/octet-stream	二进制或stream(bin,class,dms,exe,lhs,lzh)，前端对象如：Blob
-	application/ogg
-	application/pdf
-	application/xhtml+xml
-	application/x-shockwave-flash
-	application/json
-	application/ld+json
-	application/xml
-	application/zip
-	application/x-www-form-urlencoded
Audio	音频，放到audio标签处理
-	audio/mpeg
-	audio/x-ms-wma
-	audio/vnd.rn-realaudio
-	audio/x-wav
Image	图像，用img标签处理
-	image/gif
-	image/jpeg
-	image/png
-	image/tiff
-	image/vnd.microsoft.icon
-	image/x-icon
-	image/vnd.djvu
-	image/svg+xml
Multipart	-
-	multipart/mixed
-	multipart/alternative
-	multipart/related (using by MHTML (HTML mail).)
-	multipart/form-data
Text	普通文本
-	text/css
-	text/csv
-	text/html
-	text/javascript (obsolete)
-	text/plain
-	text/xml
Video	视频：放到vedio标签中展示
-	video/mpeg
-	video/mp4
-	video/quicktime
-	video/x-ms-wmv
-	video/x-msvideo
-	video/x-flv
-	video/webm
VND	-
-	application/vnd.oasis.opendocument.text
-	application/vnd.oasis.opendocument.spreadsheet
-	application/vnd.oasis.opendocument.presentation
-	application/vnd.oasis.opendocument.graphics
-	application/vnd.ms-excel
-	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
-	application/vnd.ms-powerpoint
-	application/vnd.openxmlformats-officedocument.presentationml.presentation
-	application/msword
-	application/vnd.openxmlformats-officedocument.wordprocessingml.document
-	application/vnd.mozilla.xul+xml

浏览器兼容性：

• Google Chrome
• Internet Explorer
• Firefox
• Safari
• Opera

前端解析后端返回的buffer/binary/base64图片

描述：使用 node 作为后端，读取本地图片，将其转为 buffer 或 binary 或 base64 返回给前端。

后端处理格式

// readFileSync不指定encoding时，默认返回buffer类型

// buffer
const result = fs.readFileSync('./1.jpg')
res.send(result)

// binary
const result = fs.readFileSync('./1.jpg', 'binary')
res.write(result, 'binary')
res.end()

// base64
const result = fs.readFileSync('./1.jpg', 'base64')
res.send(result)

前端处理数据格式:

1. 处理 buffer 和 binary 类型的图片数据一般采用两种方式: 一种转成 blob，一种转成 arraybuffer。
2. 处理 base64 类型的图片数据拼接前缀后直接显示图片。

const result = fetch('1.jpg')

// 处理binary
const objUrl = window.URL.createObjectURL(result)
img.src = objUrl

// 处理buffer
const binary = new Blob([result])
const objUrl = window.URL.createObjectURL(binary)
img.src = objUrl

// 处理base64
// base64方式，需要手动拼接前缀 或者 由后端拼好直接显示
// 前端拼接
const url = 'data:image/jpg;base64,' + result
img.src = url

// 后端拼接
const path = './images/1.jpg'
const result = fs.readFileSync(path, 'base64')
const reg = /^[^]+\.([^\.]+)$/
res.send(`data:image/${path.match(reg)[1]};base64,${result}`)`