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

Jacquelyn38 等级 1159 1 0
标签: nodehttps

前言

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

第一步,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获取方式

https://tinypng.com/developers

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

输入你名字跟邮箱,点击 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>

本文转转自微信公众号前端历劫之路原创https://mp.weixin.qq.com/s/K9PG9WonQimQ2BI0Bd_VGg,如有侵权,请联系删除。

收藏
评论区

相关推荐

pm2 使用心得
pm2(https://link.jianshu.com?thttps://github.com/foreverjs/forever)和forever(https://link.jianshu.com?thttps://github.com/foreverjs/forever)是启动Nodejs服务常用到的两个工具。使用这两个指令可以使node服
使用nodeJs开发自己的图床应用
前言 本文主要复盘笔者的nodeJS,通过一个线上的实战案例来总结node生态常用的技术点和最佳实践。后面会花费大概一个月的时间输出3篇以实战为主的nodeJs项目,本文是第一篇,主要介绍如何使用nodeJs开发一个图床应用。该项目对于测试和个人服务型网站非常实用,大家可以基于此扩展出更强大的应用。本文的图床项目主要使用Koa进行开发,不熟悉的可以先研究一下
pm2 基础使用
pm2(https://github.com/foreverjs/forever)和forever(https://github.com/foreverjs/forever)是启动Nodejs服务常用到的两个工具。使用这两个指令可以使node服务在后台运行(类似于linux的nohup),另外它们可以在服务因异常或其他原因被杀掉后进行自动重启。 由于
nodejs打包成为exe可执行文件
nodejs打包成为exe可执行文件需要将nodejs写的项目运行到客户机上,客户机可能没有node环境,所以需要将其打包目前上手使用的是pkg npm install pkg g生成exe文件,window环境 pkg t win d:/index.js o index.exe https://github.com/zeit/pkgfetch/releas
Windows环境下轻松搭建NodeJs服务器
大家好,我是皮皮,今天给大家分享一些好玩的 前言Nodejs是GoogleV8引擎的一个JavaScript脚本语言,实际上也就是相当于服务器一样,可以解析网页内容并产生效果。它的出现令JavaScript如虎添翼,而且Node比JavaScript执行更为快速,并且支持分布式,因为它使用了事件驱动型的非阻塞式的模型。说太多反而没意思,不如我们自己搭建一个。
RxJS的另外四种实现方式(四)——性能最高的库(续)
> 接上一篇[RxJS的另外四种实现方式(三)——性能最高的库](https://my.oschina.net/langhuihui/blog/2054887) 上一篇文章我展示了这个最高性能库的实现方法。下面我介绍一下这个性能提升的秘密。 首先,为了弄清楚Most库究竟为何如此快,我必须借助其他工具。比如chrome 的devtools性能分析,刚开始
ubuntu linux 12.04 下nodejs开发环境的配置
废话不说,步入正题 环境: ubuntu 12.04 64位 **为了不受权限问题影响,我选择的是直接使用root帐号** 下载 nodeJS >> wget http://nodejs.org/dist/v0.10.26/node-v0.10.24.tar.gz 于是你可以在你的当前目录下找到 node-v0.10.24.
ElasticSearch5.0 插件 Head 安装
ES5.0 head原理是独自运行一个程序,提供以前head插件提供的功能。所以ES中不必再安装head插件,取而代之的是head的代码(JS)独立运行在外部,包括其他非ES的服务器上。   **1.下载相关安装介质:**     head download url: https://github.com/mobz/elasticsearch-hea
Express+Socket.IO 搭建即时聊天
  技术栈是:nodejs express socketio bootstrap sqlite   由于初学,代码排版模块化实现的不好,只是提供了一个功能。  源码地址: [https://github.com/Qquanwei/Wire](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2
Javascript开发人员偏爱Deno而不是Node的5大原因
![](https://oscimg.oschina.net/oscnet/2f078ca0f30b400261bf865253aa28f0a40.jpg) NodeJS的作者Ryan Dahl发布了一个新的运行时,旨在解决Node的许多缺点。你最初的反应可能是“哦,太棒了,另一个Javascript框架?正是我所需
Linux下Nodejs安装之Hello World
去官网下载安装包 node-v0.12.7.tar.gz 1.mkdir /usr/local/nodejs 2.tar -zvxf node-v0.12.7.tar.gz 3\. cd node-v0.12.7.tar.gz 4\. ./configure --prefix=/usr/local/nodejs 5.make && make ins
Linux常用环境安装
### **node环境安装**  更新ubuntu软件源 sudo apt-get update  安装nodejs sudo apt-get install nodejs sudo apt install nodejs-legacy sudo apt install npm 更新npm源
Node.js学习路线图
Node.js学习路线图 ------------ [从零开始nodejs系列文章](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fblog.fens.me%2Fseries-nodejs%2F),将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发。Nodejs
NodeJs在windows上安装配置测试
Node.js简介 简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。 安装环境 本机系统:Windo
Nodejs支持VC++Build
**Nodejs(v0.5.5)开始支持VC++Build了** **Building with VC++** There is increasing support for native compilation on Windows using VC++ (Visual C++). This includes Visual C++ Express wh