溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹Nodejs中怎么實現圖片上傳和壓縮預覽功能，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
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，只是為了實現基本的功能。
<!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> h4{ 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> <h4>壓縮圖片</h4> <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中怎么實現圖片上傳和壓縮預覽功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
