這篇文章給大家介紹Nodejs中怎么實現(xiàn)圖片上傳和壓縮預(yù)覽功能，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

成都創(chuàng)新互聯(lián)公司長期為近1000家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為朗縣企業(yè)提供專業(yè)的網(wǎng)站設(shè)計制作、成都網(wǎng)站設(shè)計，朗縣網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

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'); // 引入靜態(tài)文件處理 const fs = require('fs'); // 文件系統(tǒng) const koaBody = require('koa-body'); //文件保存庫 const path = require('path'); // 路徑

2、使用基本配置

let app = new Koa(); let router = new Router(); tinify.key = ''; // 這里需要用到tinify官網(wǎng)的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'], })); // 靜態(tài)處理器配置 const home = serve(path.join(__dirname) + '/public/'); app.use(home);  //上傳文件限制 app.use(koaBody({     multipart: true,     formidable: {         maxFileSize: 200 * 1024 * 1024 // 設(shè)置上傳文件大小最大限制，默認(rèn)2M     } }));

3、tinify官網(wǎng)的key獲取方式

https://tinypng.com/developers

輸入你名字跟郵箱，點擊 Get your API key , 就可以了。

注意：這個API一個月只能有500次免費的機會，不過我覺得應(yīng)該夠了。

第二步，詳細(xì)接口配置

我們要實現(xiàn)圖片上傳以及壓縮，下面我們將要實現(xiàn)。

1、上傳圖片

var new1 = ''; var new2 = ''; // 上傳圖片 router.post('/uploadPic', async (ctx, next) => {     const file = ctx.request.files.file; // 上傳的文件在ctx.request.files.file     // 創(chuàng)建可讀流     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}`;     //創(chuàng)建可寫流     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()}`)                      // 根據(jù)修改時間判斷做下區(qū)分，以分辨是否更改                      if (cur.mtime != prv.mtime) {                          console.log(sql + '發(fā)生更新')                          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('服務(wù)器運行中')

第三步，前臺頁面配置

實現(xiàn)了后臺的配置，那么我們將要展示實現(xiàn)它，頁面有點low，只是為了實現(xiàn)基本的功能。

                                  
壓縮圖片
          上傳進(jìn)度：