可以
使用FormData对象来实现文件上传和下载。在
Vue中，可以
使用axios库来发送HTTP请求。以下是一个
上传文件的
示例代码：
```
javascript
<template>
<div>
<input type="file" @change="handleFileUpload"/>
<button @click="uploadFile">
上传文件</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
file: null
}
},
methods: {
handleFileUpload(event) {
this.file = event.target.files[0];
},
uploadFile() {
let
formData = new
FormData();
formData.append('file', this.file);
axios.post('/api/upload',
formData)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
}
}
}
</script>
```
在服务器端，可以
使用Node.js的multer库来处理文件上传。以下是一个Node.js的
示例代码：
```
javascript
const express = require('express');
const multer = require('multer');
const app = express();
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/')
},
filename: function (req, file, cb) {
cb(null, file.originalname)
}
});
const upload = multer({ storage: storage });
app.post('/api/upload', upload.single('file'), (req, res) => {
console.log(req.file);
res.send('文件上传成功');
});
app.listen(3000, () => {
console.log('服务器已启动');
});
```
对于文件下载，可以
使用axios库的get方法来发送HTTP请求，服务器端则需要设置Content-Disposition头信息。以下是一个下载文件的
示例代码：
```
javascript
<template>
<div>
<button @click="downloadFile">下载文件</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
methods: {
downloadFile() {
axios({
url: '/api/download',
method: 'get',
responseType: 'blob'
})
.then(response => {
const url = window.URL.createObjectURL(new Blob([response.
data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'file.txt');
document.body.appendChild(link);
link.click();
})
.catch(error => {
console.log(error);
});
}
}
}
</script>
```
在服务器端，可以
使用Node.js的sendFile方法来发送文件。以下是一个Node.js的
示例代码：
```
javascript
const express = require('express');
const app = express();
app.get('/api/download', (req, res) => {
res.setHeader('Content-Disposition', 'attachment; filename=file.txt');
res.sendFile(__dirname + '/file.txt');
});
app.listen(3000, () => {
console.log('服务器已启动');
});
```
希望这个
示例代码能够帮助你完成文件上传和下载功能。
本文介绍在Vue.js项目中如何使用FormData进行文件上传。通过创建FormData对象，并在axios异步请求时作为参数，轻松实现前后端分离项目的文件上传功能。
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
