在本文中，我们将深入探讨如何使用Node.js和Vue.js实现文件上传功能。文件上传是Web应用中的常见需求，尤其在处理多媒体内容时，如图片、文档或视频等。以下将详细解析后端和前端实现这一功能的关键步骤。
**后端（Node.js + Multer）**
在Node.js中，我们通常使用`Express`框架来构建API接口，而`Multer`库则用于处理multipart/form-data类型的请求，这是上传文件的标准格式。我们需要安装这些依赖：
```bash
npm install express multer fs path
```
接着，创建一个Express路由来处理文件上传。在示例代码中，我们定义了一个名为`uploadVideo`的POST路由，使用`multer`中间件处理单个文件上传，文件存储路径为`uploads_yx_app/video/`。
```javascript
const express = require('express');
const Router = express.Router();
const multer = require('multer');
const fs = require('fs');
const pathLib = require('path');
const videoModel = require('../../models/my_yx_app/video');
const uploadVido = multer({ dest: 'uploads_yx_app/video/' });
Router.post('/uploadVideo', uploadVido.single('file'), (req, res) => {
if (req.file) {
let file = req.file;
let newName = file.path + pathLib.parse(file.originalname).ext; // 修改文件名
fs.rename(file.path, newName, (err) => { // 重命名文件
if (err) {
res.status(200).json({ code: 0, msg: '服务器繁忙！' });
} else {
res.status(200).json({
code: 1,
msg: '上传完成',
title: pathLib.parse(file.originalname).name,
videoUrl: 'http://127.0.0.1:3001/uploads_yx_app/video/' + file.filename + pathLib.parse(file.originalname).ext,
});
}
});
} else {
res.status(200).json({ code: 0, msg: '服务器繁忙！' });
}
});
```
这里，我们接收上传的文件并将其重命名为一个新名称，然后返回一个JSON响应，其中包含文件名和一个指向上传文件的URL。
**前端（Vue.js）**
在Vue.js应用中，我们可以使用HTML5的`<input type="file">`元素让用户选择要上传的文件。Vue事件绑定`@change`可以监听到文件选择的变化，并调用相应的处理方法。
```html
<div class="from-contral" style="position: relative">
<input type="file" name="file" @change="changeFile" class="customStyle">
<el-button size="mini" type="primary">添加文件 <i class="el-icon-upload el-icon--right"></i></el-button>
<div class="zt-title-video">{{ file.name }}</div>
<div class="zt-progress" v-show="percentageShow">
<el-progress :text-inside="true" :stroke-width="20" :percentage="percentage"></el-progress>
</div>
</div>
```
Vue组件中的`changeFile`方法用于获取用户选择的文件，然后使用`FormData`对象将文件添加到POST请求中。同时，我们可以通过监听`onUploadProgress`事件来显示上传进度条。
```javascript
methods: {
changeFile(e) {
this.file = e.target.files[0];
},
saveData() {
let that = this;
let fd = new FormData();
fd.append('file', this.file);
fileUpdata({ // 假设fileUpdata是你的HTTP请求库
method: 'post',
url: '/uploadVideo',
data: fd,
onUploadProgress: (progressEvent) => {
this.percentageShow = true;
this.percentage = parseInt(((progressEvent.loaded / progressEvent.total) * 100));
},
}).then((res) => {
if (res.data.code === 1) {
// 数据持久化逻辑...
}
});
},
},
```
前端的逻辑中，`saveData`方法负责发起文件上传请求，当文件上传成功后，可能还需要进行其他操作，例如将文件信息保存到数据库（如示例中提到的`/saveVideoInfo`接口）。
通过Node.js和Vue.js的结合，我们可以创建一个完整的文件上传系统，包括前端的文件选择、进度显示以及后端的文件接收和存储。注意在实际生产环境中，需要考虑更多细节，比如错误处理、安全性（避免恶意文件上传）、服务器配置（如跨域设置）以及用户体验优化（如上传速度、文件大小限制等）。
