vue node实现文件上传
Vue 和 Node.js 实现文件上传
前端部分（Vue）
在 Vue 中，可以使用 <input type="file"> 元素和 FormData 对象来处理文件上传。
<template>
<div>
<input type="file" @change="handleFileChange" />
<button @click="uploadFile">上传文件</button>
</div>
</template>
<script>
export default {
data() {
return {
file: null
};
},
methods: {
handleFileChange(event) {
this.file = event.target.files[0];
},
async uploadFile() {
if (!this.file) return;
const formData = new FormData();
formData.append('file', this.file);
try {
const response = await fetch('http://localhost:3000/upload', {
method: 'POST',
body: formData
});
const result = await response.json();
console.log('上传成功:', result);
} catch (error) {
console.error('上传失败:', error);
}
}
}
};
</script>后端部分（Node.js）
在 Node.js 中，可以使用 Express 框架和 multer 中间件来处理文件上传。
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
const upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('file'), (req, res) => {
if (!req.file) {
return res.status(400).json({ error: '没有上传文件' });
}
const fileInfo = {
filename: req.file.filename,
originalname: req.file.originalname,
size: req.file.size,
mimetype: req.file.mimetype
};
res.json({ message: '文件上传成功', file: fileInfo });
});
app.listen(3000, () => {
console.log('服务器运行在 http://localhost:3000');
});文件存储配置
如果需要自定义文件存储路径和文件名，可以配置 multer 的存储选项。
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/');
},
filename: function (req, file, cb) {
const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1e9);
cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname));
}
});
const upload = multer({ storage: storage });文件类型限制
可以添加文件类型验证，只允许特定类型的文件上传。
const fileFilter = (req, file, cb) => {
const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];
if (allowedTypes.includes(file.mimetype)) {
cb(null, true);
} else {
cb(new Error('文件类型不支持'), false);
}
};
const upload = multer({ storage: storage, fileFilter: fileFilter });进度显示（前端）
如果需要显示上传进度，可以使用 axios 和其上传进度事件。
import axios from 'axios';
methods: {
async uploadFile() {
const formData = new FormData();
formData.append('file', this.file);
try {
const response = await axios.post('http://localhost:3000/upload', formData, {
onUploadProgress: progressEvent => {
const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
console.log('上传进度:', percentCompleted + '%');
}
});
console.log('上传成功:', response.data);
} catch (error) {
console.error('上传失败:', error);
}
}
}多文件上传
如果需要支持多文件上传，可以修改前端和后端代码。
前端：
handleFileChange(event) {
this.files = event.target.files;
},
uploadFiles() {
const formData = new FormData();
Array.from(this.files).forEach(file => {
formData.append('files', file);
});
// 发送请求...
}后端：
app.post('/upload', upload.array('files', 10), (req, res) => {
// 处理多个文件
const filesInfo = req.files.map(file => ({
filename: file.filename,
originalname: file.originalname
}));
res.json({ message: '文件上传成功', files: filesInfo });
});安全性考虑
- 限制文件大小：
const upload = multer({
storage: storage,
limits: {
fileSize: 5 * 1024 * 1024 // 5MB
}
});-
在服务器端验证文件类型，不要仅依赖前端验证。
-
考虑将上传的文件存储在非 Web 根目录下，通过专门的下载接口提供访问。
-
定期清理上传目录中的旧文件。
以上实现涵盖了从简单到进阶的文件上传功能，可以根据实际需求进行调整和扩展。
