极乐门资源网 Design By www.ioogu.com
前言
我们程序员日常都会用到图片压缩,面对这么常用的功能,肯定要尝试实现一番。
第一步,node基本配置
这里我们用到的是koa框架,它可是继express框架之后又一个更富有表现力、更健壮的web框架。
1、引入基本配置
const Koa = require('koa');// koa框架 const Router = require('koa-router');// 接口必备 const cors = require('koa2-cors'); // 跨域必备 const tinify = require('tinify'); // 图片压缩 const serve = require('koa-static'); // 引入静态文件处理 const fs = require('fs'); // 文件系统 const koaBody = require('koa-body'); //文件保存库 const path = require('path'); // 路径
2、使用基本配置
let app = new Koa(); let router = new Router(); tinify.key = ''; // 这里需要用到tinify官网的KEY,要用自己的哦,下面有获取key的教程。 //跨域 app.use(cors({ origin: function (ctx) { return ctx.header.origin; }, exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'], maxAge: 5, credentials: true, withCredentials: true, allowMethods: ['GET', 'POST', 'DELETE'], allowHeaders: ['Content-Type', 'Authorization', 'Accept'], })); // 静态处理器配置 const home = serve(path.join(__dirname) + '/public/'); app.use(home); //上传文件限制 app.use(koaBody({ multipart: true, formidable: { maxFileSize: 200 * 1024 * 1024 // 设置上传文件大小最大限制,默认2M } }));
3、tinify官网的key获取方式
获取链接
输入你名字跟邮箱,点击 Get your API key , 就可以了。
注意: 这个API一个月只能有500次免费的机会,不过我觉得应该够了。
第二步,详细接口配置
我们要实现图片上传以及压缩,下面我们将要实现。
1、上传图片
var new1 = ''; var new2 = ''; // 上传图片 router.post('/uploadPic', async (ctx, next) => { const file = ctx.request.files.file; // 上传的文件在ctx.request.files.file // 创建可读流 const reader = fs.createReadStream(file.path); // 修改文件的名称 var myDate = new Date(); var newFilename = myDate.getTime() + '.' + file.name.split('.')[1]; var targetPath = path.join(__dirname, './public/images/') + `${newFilename}`; //创建可写流 const upStream = 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); let sourse = tinify.fromFile(new1); //输入文件 sourse.toFile(new1); //输出文件 // 删除指定文件 setTimeout(() => { fs.unlinkSync(new1); }, 20000); // 删除文件夹下的文件 setTimeout(() => { deleteFolder('./public/images/') }, 3600000); let results = await change(new1); ctx.body = results }); // 压缩完成替换原图 const change = function (sql) { return new Promise((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) } } }) }) } // 删除指定文件夹的图片 function deleteFolder(path) { var files = []; if (fs.existsSync(path)) { if (fs.statSync(path).isDirectory()) { files = fs.readdirSync(path); files.forEach(function (file, index) { var curPath = 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,只是为了实现基本的功能。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>压缩图片</title> <style> h3{ text-align: center; } #progress { height: 20px; width: 500px; margin: 10px 0; border: 1px solid gold; position: relative; } #progress .progress-item { height: 100%; position: absolute; left: 0; top: 0; background: chartreuse; transition: width .3s linear; } .imgdiv{ width: 400px; text-align: center; display: none; } .imgdiv img{ width: 100%; } </style> </head> <body> <h3>压缩图片</h3> <input type="file" id="file" accept="image/*"> <div style="margin: 5px 0;">上传进度:</div> <div id="progress"> <div class="progress-item"></div> </div> <p class="status" style="display: none;"></p> <div class="imgdiv"> <img src="/UploadFiles/2021-04-02/">总结
以上所述是小编给大家介绍的Nodejs实现图片上传、压缩预览、定时删除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
极乐门资源网 Design By www.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无Nodejs实现图片上传、压缩预览、定时删除功能的评论...
更新日志
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]