你可能听说过那个火热的前端框架Vue？它被好多人喜欢，因为简单好用！不过，问题来了，文件上传时怎么办？别着急现在就来教教你如何利用Vue轻松搞定这事。我们来聊聊HTML、JS、后端API和错误处理这几块内容，相信你对文件上传会有更深入的理解哒～
HTML部分
上传进度：{{ percent }} %
搞Vue文件上传就这么简单，先在网页上放个上传表单。这个表单其实就是用form和input这两个好兄弟搞定。把名字写明白，文件类型设成multipart/form-data就行了。然后，给input标签加个label标签，这样鼠标一点就能弹出来选文件的窗口。最后，用@change事件监听文件选择，再调用handleFileChange方法更新表单里的文件名，搞定！
你做得那表格真棒！一眼就能看明白怎么用，真是太好用了。以后咱传东西就按这份模板！
JavaScript部分
搞定文件上传，得先学会搭建Vue组件，还得熟悉axios这个HTTP库用法。那咋搞？手上得有俩函数，一个叫handleFileChange（）管挑选文件，另一个用submitFile（）负责上传。至于axios，就是那个基于Promise的HTTP库，简单地往项目里丢就完事儿了！
import axios from 'axios';
export default {
data () {
return {
selectedFile: null, // 选中的文件
showProgress: false, // 是否展示上传进度条
percent: 0, // 上传进度百分比
}
},
methods: {
handleFileChange (event) {
this.selectedFile = event.target.files[0];
},
submitFile () {
if (!this.selectedFile) return;
// 新建 from 对象
const formData = new FormData();
formData.append('file', this.selectedFile, this.selectedFile.name);
this.showProgress = true;
const config = {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: progressEvent => {
// 计算上传进度百分比
this.percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
},
};
axios.post('/api/upload', formData, config)
.then((response) => {
console.log(response);
this.showProgress = false; // 移除 progress 条
})
.catch((error) => {
console.log(error);
this.showProgress = false;
});
},
},
};
告诉你怎么用axios传文件！首先要安装个’axios’，对Vue项目操作起来更顺手！
后台API部分
"axios": "^0.19.2"
前端要是想传文件，主要得看后端API咋样了。一来到Node.js这地儿，MULTER老大哥的作用可就大了，帮着搞定文件，顺便把表单数据一块带上给服务器
搞定multer的一次性传文件功能，啥文件需要上传弄好了，后台自然会处理。不仅可以上传单个文件，多个文件或者限制上传文件类型都可以。接下来，咱们给Node.js搭个Express库服务器应用，然后把要用到的依赖项添加到package.json里面。
这样设计使得前后端配合更加紧密，实现了完整的文件上传流程。
异常情况处理
const express = require('express');
const multer = require('multer');
const fs = require('fs');
const app = express();
const upload = multer({ dest: 'uploads/' });
app.post('/api/upload', upload.single('file'), (req, res) => {
const file = req.file;
if (!file) {
const error = new Error('Please upload a file');
error.httpStatusCode = 400;
return next(error);
}
// 文件重命名
const oldPath = file.path;
const newPath = 'uploads/' + file.originalname;
fs.rename(oldPath, newPath, (err) => {
if (err) {
console.error(err);
}
});
res.send('File uploaded successfully');
});
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`Server listening on port ${port}`);
});
老是遇到传输问题，文件大，网速慢，服务器还不稳定。为了让大家用得顺手，也得保证咱程序运行稳定，所以在客户端和服务器都得安装一些专业工具解决这些小问题！
遇到axios这客户端库的问题不怕，直接用Promise对象就能解决！看看我们的代码就是靠Promise.catch方法搞定的。但是要是服务器出了毛病，那就有点棘手，得看具体情况了~
想着点突发状况，处理好了以后，系统就能稳当了。大家用起来也舒心！
"express": "^4.17.1", "multer": "^1.4.2"
来聊聊怎么用Vue做文件上传~首先，在HTML里添个上传表单，再用JavaScript的axios弄明白前端那点事。然后，后端就交给Multer搞定，超简单。有啥不懂的？别怕，都给你准备好了，照着做就是！按这个流程走，你就能学会如何在Vue上实现文件上传，让你的网站变得更酷炫，功能更多样！
评论0