vue+express实现文件上传，显示上传进度条

小灰灰 2023-02-14 10:57 79阅读 0赞

### 1. 案例介绍 ###

使用前后端分离开发的模式实现文件上传，前端使用Vue框架，后端使用node的express框架，并且显示上传进度条。  
案例效果：  
![在这里插入图片描述][20200602193441239.gif_pic_center]

### 2. 核心代码 ###

#### 2.1 环境搭建 ####

**前端环境**

# 安装Vue脚手架
    cnpm i -g @vue/cli
    
    # 创建项目
    vue create myapp
    
    # 进入项目目录
    cd myapp
    
    # 安装axios
    cnpm i axios --save
    
    # 启动项目
    npm run serve

**后端环境**

# 安装express脚手架
    cnpm i -g express-generator
    
    # 创建项目
    express upload-demo
    
    # 进入项目目录
    cd upload-demo
    
    # 安装multer模块
    cnpm i multer --save
    
    # 启动项目
    npm start

因为要同时在本地启动前端和后端的服务，所以把前端服务端口改成`8080`，后端服务端口改成`3000`

#### 2.2 前端核心代码 ####

创建文件 views/Main.vue

<template>
    	<div>
    		<div>
    			<input type="file" @change="fileSelect($event)" />
    			<button @click="fileSubmit">上传</button>
    		</div>
    		<div class="progress-wrap">
    			<p>上传进度</p>
    			<p class="progress"><span :style="style"></span></p>
    		</div>
    	</div>
    </template>
    
    <script> export default { data(){ return { file: { }, //上传的文件对象 progressBar: 0 // 记录上传进度的变量 } }, computed:{ style(){ // 进度条样式 return { width: this.progressBar+"%" } } }, methods:{ fileSelect(e){ this.file = e.target.files[0] }, async fileSubmit(){ const formData = new FormData(); formData.append('file',this.file); await this.$axios.post('http://localhost:3000/file/upload',formData,{ onUploadProgress: (progressEvent)=>{ var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total ); this.progressBar = percentCompleted }}).then(res=>{ console.log(res.data) }) } } } </script>
    
    <style> .progress-wrap { width: 300px; } .progress-wrap p { width: 100%; } .progress { background-color: #c5c8ce; height: 20px; } .progress span { display: block; background-color: #19be6b; height: 100%; width: 0; } </style>

#### 2.3 后端核心代码 ####

创建路由文件 routes/upload.js

post请求的中间件 `upload.single('file')` 中的参数要和前端 `formData.append('file',this.file);` 中的键名保持一致。

#### 2.4 上传案例演示 ####

分别启动前端服务和后端服务，在浏览器中访问前端服务地址：`http://localhost:8080`  
![在这里插入图片描述][20200602192802353.gif_pic_center]

[20200602193441239.gif_pic_center]: https://img-blog.csdnimg.cn/20200602193441239.gif#pic_center
[20200602192802353.gif_pic_center]: https://img-blog.csdnimg.cn/20200602192802353.gif#pic_center