node之本地服务器图片上传的方法示例
在自己做一个简单的后台管理系统时,用的是node作本地数据库,然后用了Element-ui的upload组件来实现图片的上传,中间有遇到那么点小坑,这里记录下,比较坑的一点就是,不知道文件的命名不能带空格,然后改了好久
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.node服务器端文件
这里很重要的一点就是设置静态资源目录
app.use('/serverImage',express.static(path.join(__dirname,'serverImage')));
对图片上传进行了方法的封装
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数据*/ form.parse(req,(err,fields,files)=>{ letfile=files.file; /*如果出错,则拦截*/ if(err){ returnres.send({'status':500,msg:'服务器内部错误',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'); letnum=Math.floor(Math.random()*8999+10000); letimageName=`${time}_${num}.${extName}`; letnewPath=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=router;
服务器端入口文件
constexpress=require('express'); constapp=express(); constpath=require('path'); /*body-parser是一个HTTP请求体解析的中间件 *使用这个模块可以解析JSON、Raw、文本、URL-encoded格式的请求体 **/ constbodyParser=require("body-parser"); constdataBaseOperate=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('serverislisteningtohttp://localhost:3000') });
4.小结
对于接口文件的返回,这里使用了body-parser这个中间件来对node返回的body进行json格式的解析
很重要的一点就是设置静态资源目录,不然的话就会报错,找不到文件或者文件夹
设置静态资源目录,用于存储服务器端的静态资源文件
app.use('/serverImage',express.static(path.join(__dirname,'serverImage')));
然后就是对文件的命名不能出现空格
文件的链接可以使用本地服务器端的url地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。