node之本地服务器图片上传的方法示例

2023-08-25 11:38:05 64

在自己做一个简单的后台管理系统时，用的是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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

node之本地服务器图片上传的方法示例

热门推荐

随机推荐