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的子进程(child_process)调用系统命令的方法分享
Jun 05 NodeJs
NodeJS与Mysql的交互示例代码
Aug 18 NodeJs
NodeJS学习笔记之Http模块
Jan 13 NodeJs
Nodejs中session的简单使用及通过session实现身份验证的方法
Feb 04 NodeJs
nodejs的HTML分析利器node-jquery用法浅析
Nov 08 NodeJs
nodejs学习笔记之路由
Mar 27 NodeJs
详解Windows下安装Nodejs步骤
May 18 NodeJs
nodejs实现截取上传视频中一帧作为预览图片
Dec 10 NodeJs
使用npm安装最新版本nodejs
Jan 18 NodeJs
利用nodeJs anywhere搭建本地服务器环境的方法
May 12 NodeJs
Nodejs监听日志文件的变化的过程解析
Aug 04 NodeJs
nodejs简单抓包工具使用详解
Aug 23 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
随机头像PHP版
2006/10/09 PHP
php 引用(&amp;)详解
2009/11/20 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
php简单日历函数
2015/10/28 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
Python实现的概率分布运算操作示例
2017/08/14 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
python监控文件并且发送告警邮件
2018/06/21 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
python实现从ftp服务器下载文件
2020/03/03 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
公司前台接待岗位职责
2013/12/03 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
降价通知函
2015/04/23 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
JavaScript canvas实现流星特效
2021/05/20 Javascript
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python