Nodejs实现图片上传、压缩预览、定时删除功能

2023-08-10 09:45:04 86

前言

我们程序员日常都会用到图片压缩，面对这么常用的功能，肯定要尝试实现一番。

第一步，node基本配置

这里我们用到的是koa框架，它可是继express框架之后又一个更富有表现力、更健壮的web框架。

1、引入基本配置

constKoa=require('koa');//koa框架
constRouter=require('koa-router');//接口必备
constcors=require('koa2-cors');//跨域必备
consttinify=require('tinify');//图片压缩
constserve=require('koa-static');//引入静态文件处理
constfs=require('fs');//文件系统
constkoaBody=require('koa-body');//文件保存库
constpath=require('path');//路径

2、使用基本配置

letapp=newKoa();
letrouter=newRouter();
tinify.key='';//这里需要用到tinify官网的KEY,要用自己的哦，下面有获取key的教程。

//跨域
app.use(cors({
origin:function(ctx){
returnctx.header.origin;
},
exposeHeaders:['WWW-Authenticate','Server-Authorization'],
maxAge:5,
credentials:true,
withCredentials:true,
allowMethods:['GET','POST','DELETE'],
allowHeaders:['Content-Type','Authorization','Accept'],
}));
//静态处理器配置
consthome=serve(path.join(__dirname)+'/public/');
app.use(home);

//上传文件限制
app.use(koaBody({
multipart:true,
formidable:{
maxFileSize:200*1024*1024//设置上传文件大小最大限制，默认2M
}
}));

3、tinify官网的key获取方式

获取链接

输入你名字跟邮箱，点击GetyourAPIkey,就可以了。

注意：这个API一个月只能有500次免费的机会，不过我觉得应该够了。

第二步，详细接口配置

我们要实现图片上传以及压缩，下面我们将要实现。

1、上传图片

varnew1='';
varnew2='';
//上传图片
router.post('/uploadPic',async(ctx,next)=>{
constfile=ctx.request.files.file;//上传的文件在ctx.request.files.file
//创建可读流
constreader=fs.createReadStream(file.path);
//修改文件的名称
varmyDate=newDate();
varnewFilename=myDate.getTime()+'.'+file.name.split('.')[1];
vartargetPath=path.join(__dirname,'./public/images/')+`${newFilename}`;
//创建可写流
constupStream=fs.createWriteStream(targetPath);
new1=targetPath;
new2=newFilename;
//可读流通过管道写入可写流
reader.pipe(upStream);
//返回保存的路径
console.log(newFilename)
ctx.body="上传成功"
});

2、压缩图片以及定时删除图片

//压缩图片
router.get('/zipimg',async(ctx,next)=>{
console.log(new1);
letsourse=tinify.fromFile(new1);//输入文件
sourse.toFile(new1);//输出文件
//删除指定文件
setTimeout(()=>{
fs.unlinkSync(new1);
},20000);
//删除文件夹下的文件
setTimeout(()=>{
deleteFolder('./public/images/')
},3600000);
letresults=awaitchange(new1);
ctx.body=results
});
//压缩完成替换原图
constchange=function(sql){
returnnewPromise((resolve)=>{
fs.watchFile(sql,(cur,prv)=>{
if(sql){
//console.log(`cur.mtime>>${cur.mtime.toLocaleString()}`)
//console.log(`prv.mtime>>${prv.mtime.toLocaleString()}`)
//根据修改时间判断做下区分，以分辨是否更改
if(cur.mtime!=prv.mtime){
console.log(sql+'发生更新')
resolve(new2)
}
}
})
})
}
//删除指定文件夹的图片
functiondeleteFolder(path){
varfiles=[];
if(fs.existsSync(path)){
if(fs.statSync(path).isDirectory()){
files=fs.readdirSync(path);
files.forEach(function(file,index){
varcurPath=path+"/"+file;
if(fs.statSync(curPath).isDirectory()){
deleteFolder(curPath);
}else{
fs.unlinkSync(curPath);
}
});
//fs.rmdirSync(path);
}
//else{
//fs.unlinkSync(path);
//}
}
}

3、端口配置

app.use(router.routes()).use(router.allowedMethods());
app.listen(6300)
console.log('服务器运行中')

第三步，前台页面配置

实现了后台的配置，那么我们将要展示实现它，页面有点low，只是为了实现基本的功能。







压缩图片



压缩图片

上传进度：

Nodejs实现图片上传、压缩预览、定时删除功能

压缩图片

热门推荐

随机推荐