<!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>Document</title>
<link rel="stylesheet" href="css/photo.css">
</head>
<body>
<!-- 展示相关 -->
<div class="container">
<div class="photoHeader">
<div class="imgContainer">
<img class="photoName" src="img/1.jpg" />
</div>
<div class="btnContainer">
<span class="photoTitle">相册名称</span>
<button class="mybtn">上传照片</button>
</div>
</div>
<div class="photoContainer">
<div class="photoItem">
<img src="img/Home.png" />
<span>
home
</span>
</div>
</div>
</div>
<!-- 上传相关 -->
<div class="masking">
<div class="addPhotoContainer"></div>
<div class="addController">
<h3 class="addTitle">上传照片-普通上传(H5)<span class="close">╳</span></h3>
<div class="photoTitles">
<span class="uploadTo">上传到</span>
<div class="photoSelect">
<img class="showPhoto" src="img/1.jpg" />
相册名称
</div>
</div>
<!-- 上传按钮 -->
<div class="showContainer">
<div class="uploadContainer">
<span class="fileinput-button">
<span>上传图片</span>
<input class="imgFile" type="file" name="" multiple="multiple" />
</span>
<span class="hint">
按住Ctrl可多选
</span>
</div>
</div>
<!-- 显示待上传图片 -->
<div class="loadContainer">
<div class="wantUpload">
<!-- <div class="uploadPhotoItem">
<span class="myProgress">
<span class="plan"></span>
30%
</span>
<img src="img/1.jpg" />
<span class="pictureName">
home
</span>
</div> -->
</div>
<div class="addStyle">
<span class="fileinput-add">
<span></span>
<input class="imgFile-add" type="file" multiple="multiple" />
</span>
</div>
<!-- 开始上传按钮 -->
<div class="bottomStyle">
<span class="uploadBtn">开始上传</span>
</div>
</div>
</div>
</div>
</body>
<script>
// function createEle(item){
// let fileReader = new FileReader();
// fileReader.readAsDataURL(item);
// fileReader.onload = function(){
// let div = document.createElement("div");
// div.classList.add("uploadPhotoItem");
// div.innerHTML = `<span class="myProgress">
// <span class="plan"></span>
// 30%
// </span>
// <img src="${fileReader.result}" />
// <span class="pictureName">
// ${item.name}
// </span>`;
// document.querySelector(".wantUpload").appendChild(div);
// }
// }
let uploadArr = [];
document.querySelector(".close").onclick = function () {
document.querySelector(".masking").style.display = "none";
}
document.querySelector(".mybtn").onclick = function () {
document.querySelector(".masking").style.display = "block";
}
document.querySelector(".imgFile").onchange = function () {
// console.log(this.files);
document.querySelector(".showContainer").style.display = "none";
document.querySelector(".loadContainer").style.display = "block";
[...this.files].forEach(item => {
// 图片转换成base64格式的图片；
let WillUploadObj = new WillUploadImg(item);
WillUploadObj.createEle();
uploadArr.push(WillUploadObj);
// createEle(item);
})
}
document.querySelector(".imgFile-add").onchange = function () {
[...this.files].forEach(item => {
// 图片转换成base64格式的图片；
// createEle(item);
let WillUploadObj = new WillUploadImg(item);
WillUploadObj.createEle();
uploadArr.push(WillUploadObj);
})
}
document.querySelector(".uploadBtn").onclick = function () {
console.log(uploadArr);
queue();
async function queue() {
for (let i = 0; i < uploadArr.length; i++) {
await uploadArr[i].uploadImg();
}
}
// function queue() {
// uploadArr.forEach(async function(){
// await val.uploadImg();
// })
// }
}
class WillUploadImg {
constructor(file) {
this.file = file;
this.div = "";
}
createEle() {
// 创建节点顺序；
let fileReader = new FileReader();
fileReader.readAsDataURL(this.file);
let _this = this;
fileReader.onload = function () {
let div = document.createElement("div");
div.classList.add("uploadPhotoItem");
div.innerHTML = `<span class="myProgress">
<span class="plan"></span>
<span class="exchange">30% </span>
</span>
<img src="${fileReader.result}" />
<span class="pictureName">
${_this.file.name}
</span>`;
document.querySelector(".wantUpload").appendChild(div);
_this.div = div;
}
}
uploadImg() {
return new Promise((resolve, reject) => {
let form = new FormData();
form.append("img", this.file);
let xhr = new XMLHttpRequest();
xhr.open("post", "/upload", true);
xhr.onload = function () {
console.log(xhr.responseText);
}
xhr.upload.onprogress = (evt) => {
console.log(evt.total, evt.loaded);
// 上传的进度；
let percent = Math.round(evt.loaded / evt.total * 100) + "%";
// console.log(percent);
this.div.querySelector(".myProgress").style.display = "block";
this.div.querySelector(".plan").style.width = percent;
this.div.querySelector(".exchange").innerHTML = percent;
if (evt.loaded === evt.total)
resolve();
}
xhr.send(form);
})
}
}
// 作业：1.完成上传（普通上传）2.继续添加图片；
// 思考：1.面向对象抽像上传对象；2. 依次上传图片；
// 抽象上传的对象；---》属性：file；方法：1.创建节点；2.上传；
// 1.登录（区分用户：登录用户只能看到自己上传图片cookie）；2.完善图片上传；
</script>
</html>
const Koa = require("koa");
const fs = require("fs");
const static = require("koa-static");
const Router = require("koa-router");
// 接收post参数及上传的文件；
const koaBody = require("koa-body");
let app = new Koa();
let router = new Router();
app.use(static(__dirname+"/static"));
app.use(koaBody({
multipart:true
}))
router.get("/",ctx=>{
ctx.body = "some value";
})
router.post("/upload",ctx=>{
let filepath = ctx.request.files.img.path;
if(!fs.existsSync("static/uploads/")){
fs.mkdirSync("static/uploads/");
}
// 流方式转存 ； 文件路径；
let rs = fs.createReadStream(filepath);
rs.pipe(fs.createWriteStream("static/uploads/"+ctx.request.files.img.name));
ctx.body ={
info:"转存成功",
status:1
}
})
app.use(router.routes());
app.listen(3000);
