Nodejs 는 그림 업로드, 압축 미리 보기, 정시 삭 제 를 실현 합 니 다.
48893 단어 Node.js
우리 프로그래머 들 은 일상적으로 그림 압축 을 사용 하 는데, 이렇게 자주 사용 하 는 기능 에 직면 하여 반드시 한 번 실현 하려 고 시도 해 야 한다.
첫 번 째, node 기본 설정
여기 서 우리 가 사용 하 는 것 은
koa 이지 만 express 에 이 어 더욱 표 현 력 이 있 고 건장 한 웹 프레임 워 크 이다.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(' ')
세 번 째 단계, 프론트 페이지 설정
배경 설정 을 실현 했다 면 이 를 실현 하 는 것 을 보 여 드 리 겠 습 니 다. 페이지 가 약간 낮 고 기본 적 인 기능 을 실현 하기 위해 서 입 니 다.
<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>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Grunt에서 즉석 템플릿 엔진이 필요했기 때문에 마침내 만들었습니다.jade 라든지 ejs 라고도 좋지만, 보다 심플하게 하고 싶다고 생각해. json을 떨어 뜨렸다. 플레이스홀더(:TAG)를 마련해, 이런 HTML 만들어 둔다. template.html 자리 표시자의 문자열을 키로...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
