网络请求实战-实战文件上传

目录

表单提交数据方式

HTML5方式

base64

实战HTML5+base64

HTML5+blob上传

小结

---

表单提交数据方式

• FormData是用来表示表单数据的一个对象

里面是Key/value

用Boundary分隔的一段一段数据

• 观察用表单提交数据时POST到服务端的数据body是怎样的？
• 观察用表单提交文件时body是怎样的？
• Express如何接收表单提交的数据？

HTML Forms


  First name:

  

  Last name:

  


  file:

  


  
 

const express = require('express')
const fs = require('fs')
const path = require('path')
const bodyParser = require('body-parser')
const fileUpload = require('express-fileupload')
const { urlencoded } = require('express')
const app = express()
// 表单方式
app.get('/submit', (req, res) => {
  res.sendFile(path.resolve(__dirname, "submit.html"))  // __dirname相对路径
})

app.post(
  "/submit",
  fileUpload(),
  (req, res) => {
    console.log(req.files, req.body)
    req.files.file.mv(path.resolve(__dirname, 'upload/a.jpg'))
    res.send("ok")
  }
)

app.listen(3000)

HTML5方式

base64

用64个可打印字符（A-Za-z0-9+,=）来编码二进制

0-255的ascii码中有许多不能打印的字符

不能打印的字符就不需要在中间过程中转义，如空格变成%2f

实战HTML5+base64

• 观察HTML5的文件API使用
• 观察base64方法
• 观察直接用流上传的方法
• base64上传文件会变成4/3大小，文件变大了

HTML Forms

  file:

  


  
 

const express = require('express')
const fs = require('fs')
const path = require('path')
const bodyParser = require('body-parser')
const fileUpload = require('express-fileupload')
const { urlencoded } = require('express')
const app = express()
// HTML5   base64
app.get('/base64', (req, res) => {
  res.sendFile(path.resolve(__dirname, "submitb64.html"))
})


app.post(
  "/submitb64",
  bodyParser.json(),
  (req, res) => {
    const buffer = new Buffer(req.body.data, 'base64')
    console.log(req.body.data.length)
    fs.writeFileSync(
      path.resolve(__dirname, "upload/x.jpg"), 
      buffer)
    res.send("ok")
  }
)
app.listen(3000)

HTML5+blob上传

• 传输比Base64更快
• 对CPU压力更小

HTML Forms

  file:

  


  
 

const express = require('express')
const fs = require('fs')
const path = require('path')
const bodyParser = require('body-parser')
const fileUpload = require('express-fileupload')
const { urlencoded } = require('express')
const app = express()

// HTML5   binary
app.get('/binary', (req, res) => {
  res.sendFile(path.resolve(__dirname, "submitbinary.html"))
})
app.post(
  "/submitbinary",
  fileUpload(),
  (req, res) => {
    console.log(req.files, req.body)
    req.files.file.mv(path.resolve(__dirname, 'upload/b.jpg'))
    res.send("ok")
  }
)

app.listen(3000)

小结

• 上传文件和提交输入框中的字段没有本质的区别
• Base64方法速度慢，没有特殊原因通常用blob上传