Nodejs实现图片上传、压缩预览、定时删除功能
前言
我们程序员日常都会用到图片压缩，面对这么常用的功能，肯定要尝试实现一番。
第一步，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实现图片上传、压缩预览、定时删除功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关推荐
-
详解基于electron制作一个node压缩图片的桌面应用
基于electron制作一个node压缩图片的桌面应用 下载地址:https://github.com/zenoslin/imagemin-electron/releases 项目源码Github:https://github.com/zenoslin/imagemin-electron 准备工作 我们来整理一下我们需要做什么: 压缩图片模块 获取文件路径 桌面应用生成 压缩图片 我们需要使用imagemin这个库来压缩图片,这里我们把这个库封装成压缩模块. const imagemin = r
-
Node.js站点使用Nginx作反向代理时配置GZip压缩的教程
node.js 开发的站点,如果你也是用了nginx实现反向代理. 那么在服务端可以轻松实现 gzip 压缩,让站点浏览更顺畅. 前提条件: node.js + nginx 反向代理. node.js 需要做的工作: express 4.0以下版本: app.use(express.compress()); //主要是这句 app.use(express.json()); app.use(express.urlencoded()); app.use(express.bodyParser());
-
基于Node.js实现压缩和解压缩的方法
压缩格式 zip 和 gzip 是两种我们最常见到的压缩格式,当然,gzip 在 Windows 下很少有人接触. tar 是一种归档格式,它默认不会压缩,需要结合 gzip 来将最终的 tar 文件以 gzip 格式压缩成为一个 tar.gz 文件,通常我们会缩写为 tgz. 为什么没有提到 rar?因为它是专利保护的算法,你可以免费获得解压工具,而压缩工具是需要付费的.所以我们一般应用场景下,很少会提供 rar 压缩文件. 本文将分别介绍 gzip,tar,tgz 和 zip 的压缩和解压缩
-
详解node字体压缩插件font-spider的用法
需求: 根据甲方要求,使用UI中指定字体 移动端默认显示系统默认字体,非系统默认字体需要自行引入字体包 字体包过大,字体包通常在几MB,严重拖累页面加载速度 分析: 文本内容为固定内容,不需要更新 文本内容大多为常用文字,大多文字用不上 插件: font-spider node 安装插件方法:npm install font-spider -g 操作: 安装插件 提取项目文字: 创建一个临时html,将所有项目需要用到的文本放到html中 在htmnl中写入样式代码,举个栗子: @font-fa
-
node.js实现简单的压缩/解压缩功能示例
本文实例讲述了node.js实现简单的压缩/解压缩功能.分享给大家供大家参考,具体如下: 压缩的例子 非常简单的几行代码,就完成了本地文件的gzip压缩. var fs = require('fs'); var zlib = require('zlib'); var gzip = zlib.createGzip(); var inFile = fs.createReadStream('./extra/fileForCompress.txt'); var out = fs.createWriteS
-
Node.js服务器开启Gzip压缩教程
Gzip是什么 复制大神们的解释吧: GZIP最早由Jean-loup Gailly和Mark Adler创建,用于UNIX系统的文件压缩.我们在Linux中经常会用到后缀为.gz的文件,它们就是GZIP格式的.现今已经成为Internet 上使用非常普遍的一种数据压缩格式,或者说一种文件格式.HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术.大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度.这一般是指WWW服务器中安装的一个功能,当有人来访问这个服务器中的网站
-
node下使用UglifyJS压缩合并JS文件的方法
现在UglifyJS的最新版本为 2.8.13,主要功能为JS的压缩和合并,下面直接进入教程: 安装: <span style="font-size:18px;color:#006600;">npm install uglify-js -g</span> 将uglifyjs安装为全局变量,方便我们在任何地方使用. <span style="color:#006600;">下面是shell命令的中文解释: * source-map
-
Node4-5静态资源服务器实战以及优化压缩文件实例内容
浏览器控制台看一下RequestHeader有一个Accept-Encoding,而RespondHeaders中也会有一个Content-Encoding和他进行对应. Accept-Encoding当我们的浏览器发起一个文件的请求时告诉服务器支持哪几种压缩方式,也就是服务器用这几种压缩方式浏览器都能解压,当服务器接收到请求后,知道浏览器支持的压缩方式,服务器就会自动识别其中一种进行压缩并且告诉浏览器自己用了哪个方式压缩,浏览器知道后就知道用哪种对应方式解压了 根据拓展名限制一下支持的几钟压缩
-
Nodejs关于gzip/deflate压缩详解
0x01.关于 写http时候,在接收http请求时候,出现乱码,后来发现是gzip没有解压. 关于gzip/deflate压缩,有放入管道压缩,和非管道压缩方法. 0x02.管道压缩 Node中的I/O是异步的,因此对磁盘和网络的读写需要通过回调函数来读取数据. 当内存中无法一次装下需要处理的数据时,或者一边读取一边处理更加高效时,我们就需要用到数据流. NodeJS中通过各种Stream来提供对数据流的操作. 官网提供了管道方法: 复制代码 代码如下: // client request e
-
NodeJS服务器实现gzip压缩的示例代码
本文介绍了NodeJS服务器实现gzip压缩,分享给大家,具体如下: 在浏览器向服务器请求静态资源时,服务器为了减小在网络传输过程中消耗的流量和时间,都是将静态资源经过压缩后返回给服务器的,实现压缩的算法有 deflate 和 gzip 等,最常用的是 gzip 压缩. gzip 简介 在浏览器和服务器之间通过 gzip 压缩流实现传输的过程可以用下图表示. 当浏览器向服务器请求静态资源,服务器会将静态资源经过处理转换为压缩流,大大减小文件体积,然后将压缩流返回给浏览器,浏览器通过压缩的类型重新
-
nodejs的压缩文件模块archiver用法示例
本文实例讲述了nodejs的压缩文件模块archiver用法.分享给大家供大家参考,具体如下: 发现了个更好用的 zip-local https://www.npmjs.com/package/zip-local var zipper = require("zip-local"); zipper.sync.zip("/Users/xxx/xx/xx").compress().save("/Users/xxx/xx/xx.zip"); 如下代码实现