在自己做一个简单的后台管理系统时，用的是 node 作本地数据库，然后用了 Element-ui 的 upload 组件来实现图片的上传，中间有遇到那么点小坑，这里记录下，比较坑的一点就是，不知道文件的命名不能带空格，然后改了好久
1.index.vue 文件
这里的话，就是简单点的使用图形界面框架 Element-ui 的上传组件，然后，action 就是服务器端的地址，我这里使用了代理，将 localhost:8080 代理到你使用 node 作为服务器的地址就可以了
<template>
<div class=”avatar”>
<img
:src=”avatar?avatar:defaultImg”
/>
</div>
<el-upload
class=”upload-demo”
drag
action=”http://localhost:8080/api/upload”
:show-file-list=”false”
:on-success=”uploadImgSuccess”
>
<i class=”el-icon-upload”></i>
<div class=”el-upload__text”> 将文件拖到此处，或 <em> 点击上传 </em></div>
</el-upload>
</template>
<script>
import defaultImg from ‘@/assets/img/avatar.png’
export default{
data() {
return {
avatar: ”
}
},
methods: {
uploadImgSuccess(res) {
this.avatar = res.result.url;
}
}
}
</script>
2. 代理文件
我这里使用的是 vue-cli3 脚手架来搭建的项目，所以，自己在项目的根目录下创建一个 vue.config.js 来做一些配置
module.exports = {
devServer: {
port: 8080,
headers: {
},
inline: true,
overlay: true,
stats: ‘errors-only’,
proxy: {
‘/api’: {
target: ‘http://127.0.0.1:3000’,
changeOrigin: true // 是否跨域
}
}
},
};
3.node 服务器端文件
这里很重要的一点就是设置静态资源目录 app.use(‘/serverImage’, express.static(path.join(__dirname, ‘serverImage’)));
对图片上传进行了方法的封装
const fs = require(‘fs’);
const path = require(‘path’);
/* formidable 用于解析表单数据，特别是文件上传 */
const formidable = require(‘formidable’);
/* 用于时间格式化 */
const formatTime = require(‘silly-datetime’);
/* 图片上传 */
module.exports = (req, res) => {
/* 创建上传表单 */
let form = new formidable.IncomingForm();
/* 设置编码格式 */
form.encoding = ‘utf-8’;
/* 设置上传目录 (这个目录必须先创建好) */
form.uploadDir = path.join(__dirname, ‘../serverImage’);
/* 保留文件后缀名 */
form.keepExtensions = true;
/* 设置文件大小 */
form.maxFieldsSize = 2 * 1024 *1024;
/* 格式化 form 数据 */
form.parse(req, (err, fields, files) => {
let file = files.file;
/* 如果出错，则拦截 */
if(err) {
return res.send({‘status’: 500, msg: ‘ 服务器内部错误 ’, result: ”});
}
if(file.size > form.maxFieldsSize) {
fs.unlink(file.path);
return res.send({‘status’: -1, ‘msg’: ‘ 图片不能超过 2M’, result: ”});
}
/* 存储后缀名 */
let extName = ”;
switch (file.type) {
case ‘image/png’:
extName = ‘png’;
break;
case ‘image/x-png’:
extName = ‘png’;
break;
case ‘image/jpg’:
extName = ‘jpg’;
break;
case ‘image/jpeg’:
extName = ‘jpg’;
break;
}
if(extName.length == 0) {
return res.send({‘status’: -1, ‘msg’: ‘ 只支持 jpg 和 png 格式图片 ’, result: ”});
}
/* 拼接新的文件名 */
let time = formatTime.format(new Date(), ‘YYYYMMDDHHmmss’);
let num = Math.floor(Math.random() * 8999 + 10000);
let imageName = `${time}_${num}.${extName}`;
let newPath = form.uploadDir + ‘/’ + imageName;
/* 更改名字和路径 */
fs.rename(file.path, newPath, (err) => {
if(err) {
return res.send({‘status’: -1, ‘msg’: ‘ 图片上传失败 ’, result: ”});
} else {
return res.send({‘status’: 200, ‘msg’: ‘ 图片上传成功 ’, result: {url: `http://localhost:3000/serverImage/${imageName}`}});
}
})
})
};
方法的调用
const express = require(‘express’);
const router = express.Router();
const uploadImg = require(‘./uploadImg’);
/* 上传图片 */
router.post(‘/upload’, (req, res) => {
uploadImg(req, res);
});
module.exports = router;
服务器端入口文件
const express = require(‘express’);
const app = express();
const path = require(‘path’);
/* body-parser 是一个 HTTP 请求体解析的中间件
* 使用这个模块可以解析 JSON、Raw、文本、URL-encoded 格式的请求体
* */
const bodyParser = require(“body-parser”);
const dataBaseOperate = require(‘./database/operate’);
/* 以 application/json 格式解析数据 */
app.use(bodyParser.json());
/* 以 application/x-www-form-urlencoded 格式解析数据 */
app.use(bodyParser.urlencoded({ extended: false}));
/* 设置静态资源目录 */
app.use(‘/serverImage’, express.static(path.join(__dirname, ‘serverImage’)));
app.use(‘/api’, dataBaseOperate);
app.listen(3000, () => {
console.log(‘server is listening to http://localhost:3000’)
});
4. 小结下
对于接口文件的返回，这里使用了 body-parser 这个中间件来对 node 返回的 body 进行 json 格式的解析
很重要的一点就是设置静态资源目录，不然的话就会报错，找不到文件或者文件夹
设置静态资源目录，用于存储服务器端的静态资源文件 app.use(‘/serverImage’, express.static(path.join(__dirname, ‘serverImage’)));
然后就是对文件的命名不能出现空格
文件的链接可以使用本地服务器端的 url 地址
正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯 ^_^）
往期好文推荐：
判断 ios 和 Android 及 PC 端
webpack 打包（有面试题）
纯 css 实现瀑布流（multi-column 多列及 flex 布局）
实现单行及多行文字超出后加省略号