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的前后端分离的思考与实践(五)多终端适配
Sep 26 NodeJs
nodejs教程之入门
Nov 21 NodeJs
nodejs调用cmd命令实现复制目录
May 04 NodeJs
Nodejs获取网络数据并生成Excel表格
Mar 31 NodeJs
NodeJS和BootStrap分页效果的实现代码
Nov 07 NodeJs
详解NodeJs支付宝移动支付签名及验签
Jan 06 NodeJs
NodeJs实现定时任务的示例代码
Dec 05 NodeJs
Nodejs连接mysql并实现增、删、改、查操作的方法详解
Jan 04 NodeJs
深入理解nodejs搭建静态服务器(实现命令行)
Feb 05 NodeJs
监控Nodejs的性能实例代码
Jul 02 NodeJs
nodeJs的安装与npm全局环境变量的配置详解
Jan 06 NodeJs
nodejs实现的http、https 请求封装操作示例
Feb 06 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
php语法检查的方法总结
2019/01/21 PHP
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
Python实现求笛卡尔乘积的方法
2017/09/16 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
优秀党员获奖感言
2014/02/18 职场文书
2014学雷锋活动心得体会
2014/03/10 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
css背景和边框标签实例详解
2021/05/21 HTML / CSS
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技