1. Demo介绍
使用前后端分离开发的模式实现文件上传，前端使用Vue框架，后端使用node的express框架，并且显示上传进度条和文件上传速度。效果如下图
upload.png
2. 核心代码
2.1 前端代码
对于从小就不爱写作文的我,写太多文字不现实, 不如直接贴代码实惠,样式自己加吧,写的略啰嗦, 凑合看吧
<template>
<div>
<Upload type="drag" :before-upload="handleUpload" action="后端服务地址/upload">
<Button class="sele_file_b"><i class="sele_file_icon_b"></i>选择文件</Button>
</Upload>
<div class="file_detail_b" v-if="formValidate.file !== null">
<Table class="fileTab" :data="flieList" :columns="fileColumns" stripe disabled-hover>
<template slot-scope="{ row }" slot="action">
<div class="study-btn">
<span @click="deleteFile(row)"
><i class="delete_file_icon_b"></i
></span>
</div>
</template>
</Table>
<div class="file_btn_con_b">
<div v-if="uploadStatus">
<div class="progress_con_b">
<Progress :percent="progressBar" stroke-color="#22be4e"></Progress>
</div>
<div class="upload_speed_b">
<span class="speed_b">{{ speed }}</span>
<span>{{ this.flieList[0].size }}</span>
</div>
</div>
<Button class="file_btn_b" type="text" @click="upload" :loading="loadingStatus" >{{ loadingStatus ? "停止上传" : "开始上传" }}</Button>
</div>
</div>
</div>
</template>
<script>
// import { uploadFile } from '@/api/mirror'
import axios from "axios";
export default {
data() {
return {
speed: "",
formValidate: {
mirror_name: "",
sys_type: 0,
rule_type: "",
file: null,
},
loadingStatus: false,
uploadStatus: false,
flieList: [{ name: "", upload_status: "等待上传", size: 0 }],
fileColumns: [
{ title: "文件名", key: "name", width: 150, tooltip: true },
{
title: "上传状态",
key: "upload_status",
render: (h, params) => {
if (params.row.upload_status !== "等待上传") {
return h("div", [
h(
"span",
{
style: {
color: "#22be4e",
},
},
params.row.upload_status
),
]);
} else {
return h("div", [h("span", params.row.upload_status)]);
}
},
},
{ title: "文件大小", key: "size" },
{ title: "操作", width: 80, slot: "action", key: "handle" },
],
progressBar: 0,
};
},
methods: {
handleUpload(file) {
this.formValidate.file = file;
this.flieList[0].name = file.name;
if (file.size / 1024 < 1024) {
this.flieList[0].size = (file.size / 1024).toFixed(2) + "KB";
} else if (file.size / 1024 / 1024 < 1024) {
this.flieList[0].size = (file.size / 1024 / 1024).toFixed(2) + "M";
} else {
this.flieList[0].size =
(file.size / 1024 / 1024 / 1024).toFixed(2) + "G";
}
return false;
},
upload() {
this.loadingStatus = true;
this.uploadStatus = true;
const formData = new FormData();
formData.append("file", this.formValidate.file);
let t0 = new Date(); // 文件开始上传时间
axios.post("后端服务地址/upload", formData, {
onUploadProgress: (progressEvent) => {
var percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
this.progressBar = percentCompleted; // 这有点多余 -_-
this.flieList[0].upload_status = this.progressBar + "%";
let t1 = new Date(); // 已上传文件大小时间
// 计算出当前上传为多少kb/s
let s = Math.round(
progressEvent.loaded / 1024 / ((t1 - t0) / 1000)
);
if (s > 1024) {
this.speed = (s / 1024).toFixed(2) + "M/s";
} else {
this.speed = s + "kb/s";
}
}}
).then((res) => {
this.speed = "";
this.loadingStatus = false;
});
},
deleteFile() {
}
}
};
</script>
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; 启用了热更新, 修改文件保存后服务自动重启
