From 5ddf53b3a705936fb3f3d1162d4abc64c14e5007 Mon Sep 17 00:00:00 2001
From: Yakima <cleveryun@163.com>
Date: Sat, 30 Sep 2017 20:03:42 +0800
Subject: [PATCH] Updates

---
 pages/upload/importer.less    | 12 ++++++++++++
 pages/upload/importer.min.css |  2 +-
 pages/upload/index.html       |  5 +++--
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/pages/upload/importer.less b/pages/upload/importer.less
index 54feb54..a9c9f85 100644
--- a/pages/upload/importer.less
+++ b/pages/upload/importer.less
@@ -6,12 +6,24 @@
   box-sizing: border-box;
   background: #fff scroll no-repeat center center;
   background-size: cover;
+  border-radius: 5%;
+  overflow: hidden;
   &:before, &:after {
     content: '';
+    z-index: 1;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
+    background-color: #ccc;
+  }
+  &:before {
+    width: 80%;
+    height: 10%;
+  }
+  &:after {
+    width: 10%;
+    height: 80%;
   }
   &.has-image {
     &:before, &:after {
diff --git a/pages/upload/importer.min.css b/pages/upload/importer.min.css
index 037439f..8325667 100644
--- a/pages/upload/importer.min.css
+++ b/pages/upload/importer.min.css
@@ -1 +1 @@
-.file-wrapper{position:relative;height:120px;width:120px;border:1px solid #ccc;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff scroll no-repeat center center;background-size:cover}.file-wrapper:after,.file-wrapper:before{content:'';position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.file-wrapper.has-image:after,.file-wrapper.has-image:before{content:normal}.file-wrapper .file-control{position:absolute;z-index:10;top:0;left:0;width:100%;height:100%;opacity:0}
\ No newline at end of file
+.file-wrapper{position:relative;height:120px;width:120px;border:1px solid #ccc;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff scroll no-repeat center center;background-size:cover;-webkit-border-radius:5%;border-radius:5%;overflow:hidden}.file-wrapper:after,.file-wrapper:before{content:'';z-index:1;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#ccc}.file-wrapper:before{width:80%;height:10%}.file-wrapper:after{width:10%;height:80%}.file-wrapper.has-image:after,.file-wrapper.has-image:before{content:normal}.file-wrapper .file-control{position:absolute;z-index:10;top:0;left:0;width:100%;height:100%;opacity:0}
\ No newline at end of file
diff --git a/pages/upload/index.html b/pages/upload/index.html
index a86bfb1..a0884f0 100644
--- a/pages/upload/index.html
+++ b/pages/upload/index.html
@@ -40,7 +40,6 @@
       }
 
       var file = files[0]
-      console.log(file)
       var reader = new FileReader()
       // ~~用于将字符串转化为整数，MB前的逻辑是为了保留一位小数取整，参考：https://github.com/whxaxes/node-test/issues/11
       var fileSize = file.size / 1024 > 1024 ? (~~(10 * file.size / 1024 / 1024) / 10) + 'MB' : ~~(file.size / 1024) + 'KB'
@@ -132,7 +131,9 @@
 
     // 图片上传，将base64的图片转成二进制对象，塞进formdata上传
     function upload (basestr, type) {
-      document.querySelector('.file-wrapper').style.backgroundImage = 'url(' + basestr + ')'
+      var fileWrapper = document.querySelector('.file-wrapper')
+      fileWrapper.style.backgroundImage = 'url(' + basestr + ')'
+      fileWrapper.classList.add('has-image')
       // 去除mime type，atob() 函数用来解码一个已经被base-64编码过的数据
       var text = window.atob(basestr.split(',')[1])
       var buffer = new Uint8Array(text.length)