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


Posted in NodeJs onOctober 25, 2019

前言

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

第一步,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="" alt="" class="imgbox">
  </div>
  <div class="bbt">
    <button class="btn" style="display: none;">压缩</button>
  </div>
</body>
<script>
  //上传图片
  document.querySelector("#file").addEventListener("change", function () {
    var file = document.querySelector("#file").files[0];
    var formdata = new FormData();
    formdata.append("file", file);
    var xhr = new XMLHttpRequest();
    xhr.open("post", "http://localhost:6300/uploadPic/");
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        document.querySelector('.btn').style.display = "block";
        document.querySelector('.status').style.display = "block";
        document.querySelector('.status').innerText=xhr.responseText
      }
    }
    xhr.upload.onprogress = function (event) {
      if (event.lengthComputable) {
        var percent = event.loaded / event.total * 100;
        document.querySelector("#progress .progress-item").style.width = percent + "%";
      }
    }
    xhr.send(formdata);
  });
  // 压缩图片
  document.querySelector('.btn').onclick = function () {
    document.querySelector('.status').innerText='等待中......'
    var xhr = new XMLHttpRequest();
    xhr.open("get", "http://localhost:6300/zipimg/");
    xhr.send();
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        document.querySelector('.imgdiv').style.display = "block";
        document.querySelector('.status').innerText='压缩成功'
        document.querySelector(".imgbox").setAttribute('src', './images/' + xhr.responseText)
        document.querySelector('.btn').style.display = "none";
      }
    }
  }
</script>
</html>

总结

以上所述是小编给大家介绍的Nodejs实现图片上传、压缩预览、定时删除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

NodeJs 相关文章推荐
Nodejs极简入门教程(二):定时器
Oct 25 NodeJs
nodejs中实现阻塞实例
Mar 24 NodeJs
浅析nodejs实现Websocket的数据接收与发送
Nov 19 NodeJs
Nodejs爬虫进阶教程之异步并发控制
Feb 15 NodeJs
nodejs微信公众号支付开发
Sep 19 NodeJs
详解NodeJS框架express的路径映射(路由)功能及控制
Mar 24 NodeJs
NodeJS服务器实现gzip压缩的示例代码
Oct 12 NodeJs
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
Mar 02 NodeJs
详解nodejs http请求相关总结
Mar 31 NodeJs
nodeJs的安装与npm全局环境变量的配置详解
Jan 06 NodeJs
Node.js实现爬取网站图片的示例代码
Apr 04 NodeJs
分享node.js实现简单登录注册的具体代码
Apr 26 NodeJs
nodejs语言实现验证码生成功能的示例代码
Oct 13 #NodeJs
NodeJS有难度的面试题(能答对几个)
Oct 09 #NodeJs
Nodejs监控事件循环异常示例详解
Sep 22 #NodeJs
详解利用nodejs对本地json文件进行增删改查
Sep 20 #NodeJs
nodejs实现聊天机器人功能
Sep 19 #NodeJs
图解NodeJS实现登录注册功能
Sep 16 #NodeJs
详解NodeJs项目 CentOs linux服务器线上部署
Sep 16 #NodeJs
You might like
封装一个PDO数据库操作类代码
2009/09/09 PHP
PHP 存储文本换行实现方法
2010/01/05 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
jquery获得下拉框值的代码
2011/08/13 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
JavaScript中的几种继承方法示例
2020/12/06 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python读取注册表中值的方法
2013/04/08 Python
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
运动会跳远广播稿
2014/02/04 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
超市国庆节促销方案
2014/02/20 职场文书
现金出纳岗位职责
2014/03/15 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
个人年终总结怎么写
2015/03/09 职场文书
讲座通知范文
2015/04/23 职场文书
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript