在自己做一个简单的后台管理系统时，用的是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');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.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');app.use(bodyParser.json());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地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。