<!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>
????<!--?展示相關(guān)?-->
????<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>
????<!--?上傳相關(guān)?-->
????<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?=>?{
????????????//?圖片轉(zhuǎn)換成base64格式的圖片姐浮；
????????????let?WillUploadObj?=?new?WillUploadImg(item);
????????????WillUploadObj.createEle();
????????????uploadArr.push(WillUploadObj);
????????????//?createEle(item);
????????})
????}
????document.querySelector(".imgFile-add").onchange?=?function?()?{
????????[...this.files].forEach(item?=>?{
????????????//?圖片轉(zhuǎn)換成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()?{
????????????//?創(chuàng)建節(jié)點順序霞怀；?
????????????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);
????????????????????//?上傳的進(jìn)度邮利；
????????????????????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);
????????????})
????????}
????}
????//?作業(yè)：1.完成上傳（普通上傳）2.繼續(xù)添加圖片烦磁；
????//?思考：1.面向?qū)ο蟪橄裆蟼鲗ο螅?.?依次上傳圖片；
????//?抽象上傳的對象；---》屬性：file；方法：1.創(chuàng)建節(jié)點歧蒋；2.上傳；
????//?1.登錄（區(qū)分用戶：登錄用戶只能看到自己上傳圖片cookie）；2.完善圖片上傳谜洽；
</script>
</html>
const?Koa?=?require("koa");
const?fs?=?require("fs");
const?static?=?require("koa-static");
const?Router?=?require("koa-router");
//?接收post參數(shù)及上傳的文件萝映；
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/");
????}
????//?流方式轉(zhuǎn)存?；?文件路徑阐虚；
????let?rs?=??fs.createReadStream(filepath);
????rs.pipe(fs.createWriteStream("static/uploads/"+ctx.request.files.img.name));
????ctx.body?={
????????info:"轉(zhuǎn)存成功",
????????status:1
????}
})
app.use(router.routes());
app.listen(3000);
