Node本地服务器图片上传

在自己搭建一个简单的后台管理系统的时候，我使用node作为本地数据库，然后使用Element-ui的上传组件上传图片。中间有一些小坑，记录在这里。一件事是，我不知道文件名不能包含空格，然后改了半天。1、这里的index.vue文件简单来说就是使用图形界面框架Element-ui的上传组件，然后action就是服务器的地址。这里我是使用代理，只是将localhost:8080代理到你用node作为服务器的地址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.nodeserver-sidefiles这里重点是设置静态资源目录constfs=require('fs');constpath=require('path');/*formidable的封装用于解析表单数据,特别是文件上传*/constformidable=require('formidable');/*及时使用格式*/constformatTime=require('silly-datetime');/*图片上传*/module.exports=(req,res)=>{/*创建上传表单*/letform=newformidable.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)=>{letfile=files.file;/*如果出错拦截*/if(err){returnres.send({'status':500,msg:'serverInternalerror',result:''});}if(file.size>form.maxFieldsSize){fs.unlink(file.path);returnres.send({'status':-1,'msg':'图片不能超过2M',result:''});}/*存储扩展*/letextName='';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){returnres.send({'status':-1,'msg':'只支持jpg和png格式图片',result:''});}/*拼接新文件名*/lettime=formatTime.format(newDate(),'YYYYMMDDHHmmss');让num=Math.floor(Math.random()*8999+10000);让imageName=`${time}_${num}.${extName}`;让newPath=form.uploadDir+'/'+imageName;/*更改名称和路径*/fs.rename(file.path,newPath,(err)=>{if(err){returnres.send({'status':-1,'msg':'图片上传失败',result:''});}else{returnres.send({'status':200,'msg':'图片上传成功',result:{url:`http://localhost:3000/serverImage/${imageName}`}});}})})};方法调用constexpress=require('express');constrouter=express.Router();constuploadImg=require('./uploadImg');/*上传图片*/router.post('/upload',(req,res)=>{uploadImg(req,res);});module.exports=路由器；服务器端入口文件constexpress=require('express');constapp=express();constpath=require('path');/*body-parser是HTTP请求体解析的中间件*使用这个模块来以编码格式解析JSON、Raw、文本、URL-请求正文**/constbodyParser=require("body-parser");constdataBaseOperate=require('./database/operate');/*解析应用程序中的数据/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('服务器正在监听http://localhost:3000')});4.总结对于接口文件的返回，很重要的一点是使用body-parser中间件解析node返回的json格式的body最重要的一点是设置静态资源目录，否则会报错报告，找不到文件或文件夹。设置静态资源目录，用于存放服务器上的静态资源文件。app.use('/serverImage',express.static(path.join(__dirname,'serverImage')));然后，文件名不能包含空格。文件的链接可以使用本地服务器的url地址。我正在努力学习。如果对你的学习有帮助，请留下你的印记（点个赞^_^）columnmulti-columnandflexlayout)实现单行和多行文本超出限制省略号