js上传文件，显示上传进度条，node读取FormData文件后保存

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>上传文件</h1>
    <div>
        <input id="file" type="file">
        <input id="btn" type="button" value="上传">
    </div>
    <p><progress id="progress" value="0" max="100"></p>
    
    <script>
        let file = document.querySelector('#file')
        let btn = document.querySelector('#btn')
        let progress = document.querySelector('#progress')
        let oReq = new XMLHttpRequest()
        let fileData = null

        oReq.addEventListener("load", reqListener)
        oReq.addEventListener("progress", updateProgress)

        file.onchange = function(e) {
            const [f] = e.target.files
            fileData = f
            console.log(f)
        }

        btn.onclick = function() {
            if(fileData) {
                const form = new FormData()
                form.append('file', fileData)
                oReq.open("POST", "http://localhost:3005/upload")
                // oReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); // 后台用multiparty中间件时，不设置这个header，用body-parse时设置。
                oReq.send(form)
            }
        }

        // 上传进度
        function updateProgress (e) {
          if (e.lengthComputable) {
            let percentComplete = e.loaded / e.total * 100;
            progress.value = percentComplete
          } else {
            console.log('err')
          }
        }

        function reqListener(e) {
            console.log(e)
        }
    </script>
</body>
</html>

后端

const express = require('express')
const multiparty = require('multiparty') // 中间件，可以得到FormData文件
const fse = require('fs-extra') // 移动文件
const path = require('path')
const app = express()
const port = 3005

app.use('*', (req, res, next) => {
    res.set({
        'Access-Control-Allow-Origin': '*'
    })
    next()
})

app.post('/upload', (req, res) => {
  console.log(req.body)
  const form = new multiparty.Form();
  form.parse(req, function(err, fields, files) {
      console.log(fields,files)
      if(files) {
          let file = files.file[0]
          fse.move(file.path, path.resolve('./')+"/"+file.originalFilename) // 从临时路径移动文件到当前路径下
      }
    res.send({code: 0,msg:'收到文件啦'})
  })  
})

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

得到的文件格式

fs-extra： https://www.npmjs.com/package/fs-extra

multiparty： https://www.npmjs.com/package/multiparty

js上传文件，显示上传进度条，node读取FormData文件后保存

前端

后端

猜你喜欢