引入自动上传组件

public/static/css/common.css

@@ -80,6 +80,12 @@
 }
 
 
+.upload-img{
+  max-width: 200px;
+  max-height: 200px;
+}
+
+
 @media screen and (max-width: 768px){
   .layui-body{
       left: 0;

public/static/js/common.js

@@ -0,0 +1,112 @@
+function randomString(len) {
+  len = len || 32;
+  var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
+  var maxPos = $chars.length;
+  var pwd = '';
+  for (i = 0; i < len; i++) {
+    pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
+  }
+  return pwd;
+}
+
+function renderUpload(target, params) {
+
+  if (typeof params == "undefined") {
+    params = {}
+  }
+  if (typeof params.upload == "undefined") {
+    var upload = layui.upload
+  } else {
+    var upload = params.upload
+  }
+
+  if (typeof params.type == 'undefined') {
+    var type = target
+  } else {
+    var type = params.type
+  }
+
+  if(typeof window.uploadAddressPrefix == 'undefined'){
+    window.uploadAddressPrefix = '/api/'
+  }
+
+  if (typeof params.url == 'undefined') {
+    var url = window.uploadAddressPrefix + 'File/save'
+  } else {
+    var url = params.url
+  }
+  if (typeof params.accept == 'undefined') {
+    var accept = 'images'
+  } else {
+    var accept = params.accept
+  }
+  if (typeof params.acceptMime == 'undefined') {
+    var acceptMime = 'image/png,image/jpeg,image/gif'
+  } else {
+    var acceptMime = params.acceptMime
+  }
+  if (typeof params.isRenderInputAndShow == 'undefined') {
+    var isRenderInputAndShow = true
+  } else {
+    var isRenderInputAndShow = params.isRenderInputAndShow
+  }
+  if (typeof params.done == 'undefined') {
+    var done = function (result) {
+      layer.close(window.uploading)
+      if (result.code == 0) {
+        layer.msg('上传成功');
+        if (isRenderInputAndShow) {
+          $('.cancle-' + target).show()
+          $('.input-' + target).val(result.data.save_name);
+          $('.preview-' + target).attr('src', result.data.src).show();
+        }
+      } else {
+        layer.msg(result.msg)
+      }
+    }
+  } else {
+    var done = params.done
+  }
+
+  if (typeof params.exts == 'undefined') {
+    var exts = ''
+  } else {
+    var exts = params.exts
+  }
+
+  if (accept == 'video') {
+    if (exts.length == 0) {
+      exts = 'mp4'
+    }
+  }
+
+  if (isRenderInputAndShow) {
+    if ($('.input-' + target).val().length == '') {
+      $('.cancle-' + target).hide()
+    } else {
+      $('.cancle-' + target).show()
+    }
+    $('.cancle-' + target).click(function () {
+      $('.input-' + target).val('');
+      $('.preview-' + target).hide();
+      $(this).hide()
+    })
+  }
+
+  return upload.render({
+    elem: '.upload-' + target,
+    url: url,
+    data: {
+      type: type,
+    },
+    accept: accept,
+    acceptMime: acceptMime,
+    before: function () {
+      window.uploading = layer.load()
+    },
+    done: done,
+    error: function () {
+      layer.close(window.uploading)
+    }
+  })
+}

view/admin/common/_require.html

@@ -10,7 +10,7 @@
 <script src="/static/js/common.js"></script>
 
 <script>
-
+  window.uploadAddressPrefix = '/admin/'
   //JavaScript代码区域
   layui.use(['element', 'layer', 'util'], function () {
     var element = layui.element;
@@ -80,18 +80,18 @@
 
         var boxItem = $('.tpl .table-card-box').clone()
 
-                $.each($(trItem).data(),function(index,value){
+        $.each($(trItem).data(), function (index, value) {
 
-                    $(boxItem).data(index,value)
+          $(boxItem).data(index, value)
         })
 
         $(trItem).find('td').each(function (index, ele) {
           var itemItem = $('.tpl .table-card-item').clone()
           $(itemItem).find('.item-title').text($('.layui-table thead th').eq(index).text())
 
-                    if($(ele).children().length == 0){
+          if ($(ele).children().length == 0) {
             $(itemItem).find('.item-value').html($(ele).html())
-                    }else{
+          } else {
 
             $(ele).children().clone().appendTo($(itemItem).find('.item-value'))
           }

view/admin/system/index.html

@@ -48,18 +48,17 @@
                       <input type="text" name="site_desc" value="{:get_system_config('site_desc')}" class="layui-input">
                     </div>
                   </div>
+
                   <div class="layui-form-item">
-                    <div class="layui-form-label">网站logo</div>
+                    <label class="layui-form-label">网站LOGO</label>
                     <div class="layui-input-block">
-                      <div>
-                        <div class="layui-btn upload-site-logo">上传logo</div>
+                      <div class="layui-btn upload-site-logo">
+                        上传
                       </div>
+                      <input type="hidden" name="site_logo" value="{:get_system_config('site_logo')}" class="input-site-logo">
                       <div>
-                        <img class="site-logo" style="max-width: 200px;"
-                          src="{:get_source_link(get_system_config('site_logo'))}" alt="">
+                        <img src="{:get_source_link(get_system_config('site_logo'))}" class="upload-img preview-site-logo" alt="">
                       </div>
-                      <input type="hidden" name="site_logo" value="{:get_system_config('site_logo')}"
-                        class="layui-input">
                     </div>
                   </div>
                   <div class="layui-form-item">
@@ -112,19 +111,18 @@
                     </div>
                   </div>
                   <div class="layui-form-item">
-                    <div class="layui-form-label">二维码</div>
+                    <label class="layui-form-label">二维码</label>
                     <div class="layui-input-block">
+                      <div class="layui-btn upload-site-qrcode">
+                        上传
+                      </div>
+                      <input type="hidden" name="site_qrcode" value="{:get_system_config('site_qrcode')}" class="input-site-qrcode">
                       <div>
-                        <div class="layui-btn upload-site-qrcode">上传二维码</div>
-                      </div>
-                      <div>
-                        <img class="site-qrcode" style="max-width: 200px;"
-                          src="{:get_source_link(get_system_config('site_qrcode'))}" alt="">
-                      </div>
-                      <input type="hidden" name="site_qrcode" value="{:get_system_config('site_qrcode')}"
-                        class="layui-input">
+                        <img src="{:get_source_link(get_system_config('site_qrcode'))}" class="upload-img preview-site-qrcode" alt="">
                       </div>
                     </div>
+                  </div>
+                  
                   <div class="layui-form-item">
                     <div class="layui-form-label">站点fovicon</div>
                     <div class="layui-input-block">
@@ -179,42 +177,9 @@
         var upload = layui.upload;
 
 
-        var uploadSiteLogo = upload.render({
-          elem: '.upload-site-logo',
-          url: '{:url("File/save")}',
-          data: {
-            type: 1,
-            dir: 'site_logo'
-          },
-          accept: 'images',
-          done: function (result) {
-            if (result.code == 0) {
-              layer.msg('上传成功');
-              $('input[name="site_logo"]').val(result.data.save_name);
-              $('.site-logo').attr('src', result.data.src);
-            } else {
-              layer.msg(result.msg)
-            }
-          }
-        })
-        var uploadSiteLogo = upload.render({
-          elem: '.upload-site-qrcode',
-          url: '{:url("File/save")}',
-          data: {
-            type: 1,
-            dir: 'site_logo'
-          },
-          accept: 'images',
-          done: function (result) {
-            if (result.code == 0) {
-              layer.msg('上传成功');
-              $('input[name="site_qrcode"]').val(result.data.save_name);
-              $('.site-qrcode').attr('src', result.data.src);
-            } else {
-              layer.msg(result.msg)
-            }
-          }
-        })
+
+        renderUpload('site-logo')
+        renderUpload('site-qrcode')
         var uploadSiteLogo = upload.render({
           elem: '.upload-site-fovicon',
           url: '{:url("File/save")}',