vue+iview+node+express实现文件上传，显示上传进度条,实时计算上传速度

1. Demo介绍

使用前后端分离开发的模式实现文件上传，前端使用Vue框架，后端使用node的express框架，并且显示上传进度条和文件上传速度。效果如下图

upload.png

2. 核心代码

2.1 前端代码

对于从小就不爱写作文的我,写太多文字不现实, 不如直接贴代码实惠,样式自己加吧,写的略啰嗦, 凑合看吧

onUploadProgress: axios的文件进度条事件, 通过此事件可获取文件上传进度,以及相关文件信息
progressEvent.loaded: 返回文件已上传大小
progressEvent.total: 返回上传文件的总大小
利用上述返回值可计算出文件上传的进度(百分比, 代码中有体现)

计算上传文件速率(我感觉对)
let speed = Math.round( progressEvent.loaded / 1024 / ((t1 - t0) / 1000))
speed = Math.round(文件已上传大小 / 1024 / ((已上传文件大小所用时间 - 文件开始上传时间) / 1000))

2.2 后端代码

创建index.js文件, 代码如下;

const express = require('express') // 引入express 框架
const app = express()
let multer = require('multer')
let fs = require('fs');
let path = require('path');
let Mock = require('mockjs'); //引入mock模块
const cors = require('cors')
app.use(cors())

const bodyParser = require('body-parser')
// json 请求
app.use(bodyParser.json())

// 表单请求
app.use(bodyParser.urlencoded({ extended: false }))
app.listen(3000, () => {
    console.log('Server running ...');
})

let upload = multer({
    storage: multer.diskStorage({
        //设置文件存储位置
        destination: function(req, file, cb) {
            let date = new Date();
            let year = date.getFullYear();
            let month = (date.getMonth() + 1).toString().padStart(2, '0');
            let day = date.getDate();
            let dir = "./uploads/" + year + month + day;

            //判断目录是否存在，没有则创建
            if (!fs.existsSync(dir)) {
                fs.mkdirSync(dir, {
                    recursive: true
                });
            }

            //dir就是上传文件存放的目录
            cb(null, dir);
        },
        //设置文件名称
        filename: function(req, file, cb) {
            let fileName = file.fieldname + '-' + Date.now() + path.extname(file.originalname);
            //fileName就是上传文件的文件名
            cb(null, fileName);
        }
    })
});

app.post('/upload', upload.single('file'), (req, res) => {
    console.log(req.file);
    res.json({
        file: req.file
    })
})

package.json 文件配置如下;

"scripts": {
    "start": "hotnode index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Multer 是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它主要用于上传文件。它是写在 busboy 之上非常高效。
GitHub: https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md
首次启动服务 npm start; 启用了热更新, 修改文件保存后服务自动重启