Nodejs中怎么实现图片上传和压缩预览功能

这篇文章给大家介绍Nodejs中怎么实现图片上传和压缩预览功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

成都创新互联公司长期为近1000家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为朗县企业提供专业的网站设计制作、成都网站设计，朗县网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。

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

输入你名字跟邮箱，点击 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，只是为了实现基本的功能。

                                  
压缩图片
          上传进度：