文件上
传：
1. 在
前端页面中添加一个
文件上
传的组件，使用`v-model`指令绑定上
传的
文件对象。
```html
<template>
<div>
<input type="file" v-model="file">
<button @click="uploadFile">
上传文件</button>
</div>
</template>
<script>
export default {
data() {
return {
file: null,
};
},
methods: {
async uploadFile() {
const formData = new FormData();
formData.append('file', this.file);
//
调用后端接口，将
文件数据通过FormData对象
传递给
后端
const res = await this.$http.post('/upload', formData);
console.log(res);
},
},
};
</script>
```
2. 在
后端实现
文件上
传的
接口，使用`multer`中间件处理
上传文件。
```
javascript
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
// 设置
上传文件的存储路径和
文件名
const storage = multer.diskStorage({
destination(req, file, cb) {
cb(null, 'uploads/');
},
filename(req, file, cb) {
const extname = path.extname(file.originalname);
cb(null, `${file.fieldname}-${Date.now()}${extname}`);
},
});
// 创建multer中间件实例
const upload = multer({ storage });
// 处理
文件上
传的
接口
app.post('/upload', upload.single('file'), (req, res) => {
console.log(req.file);
res.json({ message: '
文件上
传成功' });
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
```
文件下载：
1. 在
前端页面中添加一个下载按钮，使用`v-on:click`绑定下载
文件的方法。
```html
<template>
<div>
<button @click="downloadFile">下载
文件</button>
</div>
</template>
<script>
export default {
methods: {
async downloadFile() {
//
调用后端接口，获取
文件数据
const res = await this.$http.get('/download', { responseType: 'blob' });
// 创建Blob对象，用于下载
文件
const blob = new Blob([res.data]);
const url = window.URL.createObjectURL(blob);
// 创建a标签，模拟点击下载
const link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', 'file.txt');
document.body.appendChild(link);
link.click();
// 释放URL对象
window.URL.revokeObjectURL(url);
},
},
};
</script>
```
2. 在
后端实现
文件下载的
接口，使用`fs`模块读取
文件内容，并设置响应头`Content-Disposition`，告诉浏览器下载
文件。
```
javascript
const express = require('express');
const path = require('path');
const fs = require('fs');
const app = express();
// 处理
文件下载的
接口
app.get('/download', (req, res) => {
const filePath = path.join(__dirname, 'file.txt');
const fileName = path.basename(filePath);
const fileStream = fs.createReadStream(filePath);
// 设置响应头，告诉浏览器下载
文件
res.setHeader('Content-Disposition', `attachment; filename=${fileName}`);
res.setHeader('Content-Type', 'application/octet-stream');
fileStream.pipe(res);
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
```
注意：以上代码仅供参考，具体实现可能会因为项目需求和环境差异而有所变化。
扫一扫
2117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
