diff --git a/package.json b/package.json
index e9d2b17..f56d19c 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "moment": "^2.29.1",
     "prerender-spa-plugin": "^3.4.0",
     "puppeteer": "^10.4.0",
+    "spark-md5": "^3.0.2",
     "uuid": "^9.0.0",
     "v-contextmenu": "^2.9.0",
     "v-viewer": "^1.6.3",
@@ -35,6 +36,7 @@
     "vue-qr": "^2.5.0",
     "vue-router": "^3.5.1",
     "vue-runtime-helpers": "^1.1.2",
+    "vue-simple-uploader": "^0.7.6",
     "vuex": "^3.6.2",
     "webpack": "^4.23.0"
   },
diff --git a/src/App.vue b/src/App.vue
index 7683ce8..6c423db 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -82,8 +82,7 @@ html, body, .app {
 }
 
 .app {
-  font-family: Noto Sans SC, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-  font-style: normal;
+  font-family: var(--vt-font-family-base);
   font-weight: 400;
 }
 </style>
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index da06bbe..546d574 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1,11 +1,15 @@
 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
 body {
-    font-family: Noto Sans SC, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-    font-style: normal;
-    font-weight: 400;
+    font-family: var(--vt-font-family-base);
+    /*font-family: CustomFont,Noto Sans SC,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;*/
     overflow: hidden;
+
 }
 
+:root {
+    --vt-font-family-base: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    --vt-font-family-mono: Menlo, Monaco, Consolas, "Courier New", monospace;
+}
 
 .move-style-index {
     max-width: 95%;
diff --git a/src/assets/img/text/upimg_text.png b/src/assets/img/text/upimg_text.png
new file mode 100644
index 0000000..19f81b7
Binary files /dev/null and b/src/assets/img/text/upimg_text.png differ
diff --git a/src/assets/img/text/urlimg_text.png b/src/assets/img/text/urlimg_text.png
new file mode 100644
index 0000000..7854475
Binary files /dev/null and b/src/assets/img/text/urlimg_text.png differ
diff --git a/src/assets/js/bus.js b/src/assets/js/bus.js
new file mode 100644
index 0000000..8853b4d
--- /dev/null
+++ b/src/assets/js/bus.js
@@ -0,0 +1,3 @@
+import Vue from 'vue'
+
+export default new Vue()
diff --git a/src/assets/js/upload.js b/src/assets/js/upload.js
index 3a1ef6b..6fdadbf 100644
--- a/src/assets/js/upload.js
+++ b/src/assets/js/upload.js
@@ -1,9 +1,12 @@
 import albumList from '../../components/comp/album-list.vue'
-import {request} from "../../network/request";
+import {request} from "../../network/request"
 import vueQr from 'vue-qr'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-import md5 from "js-md5";
+import md5 from "js-md5"
+import UploaderList from "@/components/comp/uploadList"
+// import ColorThief from "colorthief";
+import SparkMD5 from "spark-md5";
 
 export default {
     metaInfo() {
@@ -22,6 +25,11 @@ export default {
             link: [{
                 rel: 'asstes',
                 href: 'http://www.hellohao.cn/'
+            }, {
+                link: [{                 // set link
+                    rel: 'icon',
+                    href: 'https://g.csdnimg.cn/static/logo/favicon32.ico'
+                }]
             }]
         }
 
@@ -33,67 +41,144 @@ export default {
     },
     data() {
         return {
+            screenWidth: 720,
             uploadImg: require("../img/uploadImg.png"),
-            linkImg: require("../img/link.png"),
             timeImg: require("../img/time.png"),
+            // tagImg: require("../assets/img/tag.png"),
+            // storeImg: require("../assets/img/store.png"),
             isToolImgStyle: 'width: 50px;',
             loading: false,
             urlUploadMsg: false,
             termMsg: false,//上传期限的弹窗
             imgUrl: null,
             uploadInfo: {
+                // - 图片支持格式
                 suffix: null,
+                // - 图片限制大小（访客、用户）
                 filesize: null,
+                // - 图片最多同时上传个数
                 imgcount: 1,
+                // - 上传开关（访客、用户）
                 uploadSwitch: 0,
             },
             isAlbum: false,
-            ViewURL: null,
             albumData: {},
-            headers: {
-                'usersOrigin': md5(window.location.protocol + '//' + window.location.host),
-                "Authorization": localStorage.getItem('Authorization')
-            },
-            data: {
-                day: 0
-            },
-            imgListShow: 'show',
+            // data:{
+            //     day:0,
+            //     classifications:null,
+            //     source:0
+            // },
+            img_day: 0,
             selectIndex: [],
             selectIndexUid: [],//这个uid是系统自己生成的一个数字串，仅用于勾选上传图片使用，防止重复图片选一个 都是同一个imguid的问题
             selectImg: [],
-            defaultList: [],
-            imgName: '',
             visible: false,
             IsImgLink: false,
             uploadList: [],
-            // imgLinkForShortLink:null,
             imgLinkForUrl: null,
+            imgLinkForBriefimgurl: null,
             imgLinkForMD: null,
             imgLinkForHtml: null,
             images: [],
             imgIndex: null,
+            //画廊多选操作所需变量
             albumlist: [],
             dayList: [{"label": "永久", "value": 0}, {"label": "1天", "value": 1}, {
                 "label": "3天",
                 "value": 3
             }, {"label": "7天", "value": 7}, {"label": "30天", "value": 30}],
-            IsShowtagMsg: false,
-            tagInfo: null,
-            tempNum: 0,//验证是否提示过单次上传个数弹窗
             tempLink: 0,
             tempURLErr: false,
             upUrlNum: -1,
             ismsg: null,
-            spinShow: false
-
+            spinShow: false,
+            mytheme: {
+                myColor1: 'rgba(255, 255, 255, .9)',//卡片背景
+                myColor2: '#515860',//文字颜色/边框颜色/图标颜色
+                myColor3: '#f35d58',//按钮颜色
+                myColor4: '#515860',
+            },
         }
     },
-    methods: {
-
-        created() {
-            this.imgListShow = 'show';
+    watch: {
+        img_day: function (newval, oldval) {
+            localStorage.setItem("img_day", newval)
+            // console.log("newval",newval)
+            // console.log("oldval",oldval)
         },
 
+    },
+    beforeUpdate() {
+        //解决弹窗关闭后的延迟问题
+        // let chArr = document.body.getElementsByClassName("ivu-modal-mask");
+        // for (let i = 0; i < chArr.length; i++) {
+        //     if (chArr[i] != null)
+        //         chArr[i].remove(chArr[i]);
+        // }
+    },
+    mounted() {
+        localStorage.setItem("img_day", this.img_day)
+        this.$refs.UploaderList.setAssign(document.getElementById('bodydom'))
+        this.$Spin.show();
+        this.getUploadInfo();
+
+    },
+    methods: {
+        returnImgData(data) {
+            // console.log('上传页面接到的返回值',data)
+            this.uploadList.push(data)
+            this.$store.commit("setCopyAllUrl", this.uploadList);
+            this.$emit('showBtn', this.uploadList);
+        },
+        getProgress() {
+            this.$refs.UploaderList.showProgressModel()
+        },
+        async sendImgData(file) {
+            if (this.getUploadSwitch) {
+                this.$Message.warning("系统暂时关闭了用户上传功能");
+                return;
+            } else {
+                this.$Notice.info({
+                    title: '图像上传',
+                    desc: '剪贴板图像上传准备开始...'
+                });
+            }
+            var ret = await this.getFileMD5(file);
+            var formRrcover = new FormData()
+            formRrcover.append('file', file)
+            formRrcover.append('day', window.localStorage.getItem('img_day'))
+            formRrcover.append('md5', ret)
+            this.$http.post('/upload', formRrcover, {
+                'Content-type': 'multipart/form-data',
+                timeout: 600000
+            }).then(res => {
+                if (res.data.code == '200') {
+                    this.uploadList.push(res.data.data)
+                    this.$store.commit("setCopyAllUrl", this.uploadList);
+                    this.$emit('showBtn', this.uploadList);
+                } else {
+                    this.$Message.warning("上传剪贴板图像失败");
+                }
+            }, err => {
+                // 出现错误时的处理
+            })
+        },
+        getFileMD5(file) {
+            return new Promise((resolve, reject) => {
+                try {
+                    var fileReader = new FileReader();
+                    var spark = new SparkMD5.ArrayBuffer();
+                    fileReader.readAsArrayBuffer(file);
+                    fileReader.onload = function (e) {
+                        spark.append(e.target.result);
+                        var md5 = spark.end();
+                        resolve(md5)
+                    };
+                } catch (e) {
+                    reject(null)
+                }
+            })
+        },
         handleRemove(file) {
             this.$Modal.confirm({
                 title: '确认删除',
@@ -101,7 +186,7 @@ export default {
                 onOk: () => {
                     this.$Spin.show();
                     var param = {
-                        imguid: file.response.data.imguid
+                        imguid: file.imguid
                     }
                     request(
                         "/deleImagesByUid",
@@ -110,12 +195,15 @@ export default {
                         if (res.status == 200) {
                             if (res.data.code == '200') {
                                 this.$Message.success(res.data.info);
-                                const fileList = this.$refs.upload.fileList;
-                                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
-                                this.$store.commit("setCopyAllUrl", this.$refs.upload.fileList);
+                                for (let i = 0; i < this.uploadList.length; i++) {
+                                    if (this.uploadList[i].imguid == file.imguid) {
+                                        this.uploadList.splice(i, 1);
+                                    }
+                                }
+                                this.$store.commit("setCopyAllUrl", this.uploadList);
                                 this.$emit('showBtn', this.uploadList);
-                                this.selectIndex.splice(this.selectIndex.indexOf(file.response.data.imguid), 1);
-                                this.selectIndexUid.splice(this.selectIndexUid.indexOf(file.uid), 1);
+                                this.selectIndex.splice(this.selectIndex.indexOf(file.imguid), 1);
+                                this.selectIndexUid.splice(this.selectIndexUid.indexOf(file.imguid), 1);
                             } else {
                                 this.$Message.error(res.data.info);
                             }
@@ -125,9 +213,7 @@ export default {
                     }).catch(err => {
                         this.$Spin.hide();
                         console.log(err);
-                        this.$Message.error('服务器请求错误');
                     })
-
                 },
                 onCancel: () => {
                     // this.$Message.info('已取消删除');
@@ -135,60 +221,9 @@ export default {
             });
 
         },
-        handleSuccess(res, file) {
-            this.tempNum = 0;
-            if (res.code != "200") {
-                const fileList = this.$refs.upload.fileList;
-                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
-                this.$Message.error(res.info);
-                return false;
-            }
-            if (res.length > 0) {
-                this.images.push(res[0]);
-            }
-            // let urlText = this.$store.state.copyAllUrl+res.data.url+'\n';
-            // this.$store.commit("setCopyAllUrl", urlText);
-            this.$store.commit("setCopyAllUrl", this.$refs.upload.fileList);
-
-            this.$emit('showBtn', this.uploadList);
-            const box = document.getElementById('box');
-            box.scrollTop = box.scrollHeight;
-        },
-        handleFormatError(file) {
-            this.$Notice.warning({
-                title: '文件格式不正确',
-                desc: file.name + ' 的文件格式不受支持.'
-            });
-        },
-        handleMaxSize(file) {
-            this.$Notice.warning({
-                title: '超过图像大小限制',
-                desc: '文件: ' + file.name + ' 太大, 不能超过 ' + this.uploadInfo.filesize + ' K'
-            });
-        },
-        handleBeforeUpload() {
-            const check = this.uploadList.length < this.uploadInfo.imgcount;
-            if (!check) {
-                if (this.tempNum == 0) {
-                    this.$Notice.warning({
-                        name: 'imgcount',
-                        duration: 0,
-                        onClose: this.setImgCountMSG,
-                        title: '页面上传图像过多',
-                        desc: '系统限制了页面的上传图像数量，上传图像不得超过' + this.uploadInfo.imgcount + '个图像'
-                    });
-                    this.tempNum = 1;
-                }
-
-            }
-            return check;
-        },
-        setImgCountMSG() {
-            this.tempNum = 0;
-        },
-        uploadError() {
-            console.log("图片上传出错")
-        },
+//滚动到最下边
+        // const box = document.getElementById('box');
+        // box.scrollTop = box.scrollHeight;
         allSett() {
             if (this.selectIndex.length > 0) {
                 this.getAlbumImgList();
@@ -197,15 +232,12 @@ export default {
                 this.$Message.info('请选择要操作的图片');
             }
         },
-        clickImg(key, uid) {
-            if (this.selectIndexUid.indexOf(uid) == -1) {
+        clickImg(key) {
+            if (this.selectIndex.indexOf(key) == -1) {
                 this.selectIndex.push(key);
-                this.selectIndexUid.push(uid);
             } else {
                 this.selectIndex.splice(this.selectIndex.indexOf(key), 1);
-                this.selectIndexUid.splice(this.selectIndexUid.indexOf(uid), 1);
             }
-
         },
         uploadForUrl() {
             if (this.imgUrl == null || this.imgUrl == '') {
@@ -228,40 +260,25 @@ export default {
         },
         sendUploadForUrl(urlText) {
             var param = {
-                day: 0,
-                imgUrl: urlText
+                day: this.img_day,
+                imgUrl: urlText,
             }
             request(
                 "/uploadForUrl",
                 param, 1000 * 60 * 120).then(res => {
-                // this.loading = false;
-                // this.urlUploadMsg = false;
                 this.spinShow = false;
-                // setTimeout(this.ismsg, 1);
                 if (res.status == 200) {
                     this.upUrlNum++;
                     if (res.data.code == '200') {
-                        console.log("URl上传成功返回值测试");
-                        console.log(res.data);
                         let jsonData = res.data.data;
                         if (jsonData.urls.length > 0) {
                             for (let i = 0; i < jsonData.urls.length; i++) {
-                                var json = {
-                                    "status": "finished",
-                                    "name": "link.png",
-                                    "size": 0,
-                                    "percentage": 100,
-                                    "uid": this.getUuid(14, 14),
-                                    "showProgress": false,
-                                    "response": jsonData.urls[i],
-                                    "exceptions": null
-                                }
-                                this.$refs.upload.fileList.push(json);
-                                // let urlText = this.$store.state.copyAllUrl+jsonData.urls[i].url+'\n';
-                                // this.$store.commit("setCopyAllUrl", urlText);
+                                this.uploadList.push(jsonData.urls[i].data)
+                            }
+                            if (this.uploadList.length > 0) {
+                                this.$store.commit("setCopyAllUrl", this.uploadList);
+                                this.$emit('showBtn', this.uploadList);
                             }
-                            this.$store.commit("setCopyAllUrl", this.$refs.upload.fileList);
-                            this.$emit('showBtn', this.uploadList);
                         }
                         this.imgUrl = null;
                         var text = "";
@@ -278,30 +295,23 @@ export default {
                             title: "批量上传执行完毕",
                             content: text
                         });
-                        // this.$Message.success({
-                        //     content: "批量上传执行完毕,共",
-                        //     duration: 5
-                        // });
-
+                        this.imgUrl = null;
                     } else {
                         this.$Message.warning(res.data.info);
                     }
-
                 } else {
                     this.$Message.error("请求时出现错误");
                 }
             }).catch(err => {
                 this.$Spin.hide();
-                // this.loading = false;
-                // this.urlUploadMsg = false;
                 console.log(err);
-                this.$Message.error('服务器请求错误');
+                this.$Message.error(err);
             })
         },
         //获取选中的画廊图片信息
         getAlbumImgList() {
             var param = {
-                imguidlist: this.selectIndex
+                imguidlist: this.selectIndex//JSON.stringify(this.selectIndex),
             }
             request(
                 "/getAlbumImgList",
@@ -329,11 +339,12 @@ export default {
                     var json = res.data.data;
                     if (json) {
                         this.uploadInfo = json;
+                        this.$refs.UploaderList.setUploadInfo(json)
                     } else {
                         this.$Message.error("获取当前上传信息时出现错误");
                     }
                 } else {
-                    this.$Message.error("获取当前上传信息时出现错误");
+                    console.error("获取当前上传信息时出现错误");
                 }
             }).catch(err => {
                 this.$Spin.hide();
@@ -343,9 +354,10 @@ export default {
         },
         getImgLink(img) {
             var host = window.location.host;
-            this.imgLinkForUrl = img.response.data.url;
-            this.imgLinkForHtml = '<img src="' + img.response.data.url + '" alt="' + img.name + '" />';
-            this.imgLinkForMD = '![' + img.name + '](' + img.response.data.url + ')';
+            this.imgLinkForUrl = img.url;
+            this.imgLinkForBriefimgurl = img.briefimgurl;
+            this.imgLinkForHtml = '<img src="' + img.url + '" alt="' + img.name + '" />';
+            this.imgLinkForMD = '![' + img.name + '](' + img.url + ')';
             this.IsImgLink = true;
         },
         copyBtn() {
@@ -377,12 +389,11 @@ export default {
             this.isAlbum = true;
         },
         showUrlUploadMsg() {
-            this.urlUploadMsg = true;
-            // if(this.uploadInfo.uploadSwitch==1){
-            //     this.urlUploadMsg = true;
-            // }else{
-            //     this.$Message.warning(this.uploadInfo.uploadInfo);
-            // }
+            if (this.uploadInfo.uploadSwitch == 1) {
+                this.urlUploadMsg = true;
+            } else {
+                this.$Message.warning(this.uploadInfo.uploadInfo);
+            }
         },
         showtermMsg() {
             this.termMsg = true;
@@ -399,44 +410,10 @@ export default {
                     title: '您之后上传的数据将会在' + value + '天后过期'
                 });
             }
-
         },
-        // 移入
-        mouseOver() {
-            this.isToolImgStyle = "width: 50px;\n" +
-                "  -webkit-transition:all 0.5s ease 0s;\n" +
-                "  -moz-transition:all 0.5s ease 0s;\n" +
-                "  transition:all 0.5s ease 0s;";
-        },
-        // 移出
-        mouseLeave() {
-            this.isToolImgStyle = "width: 50px;\n";
-        },
-        getUuid(len, radix) {
-            var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
-            var uuid = [],
-                i;
-            radix = radix || chars.length;
 
-            if (len) {
-                for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
-            } else {
-                var r;
-                uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
-                uuid[14] = '4';
-
-                for (i = 0; i < 36; i++) {
-                    if (!uuid[i]) {
-                        r = 0 | Math.random() * 16;
-                        uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
-                    }
-                }
-            }
-            return uuid.join('');
-        },
         onGetLines() {
             var tempText = this.imgUrl;
-
             if (this.imgUrl == '') {
                 this.tempLink = 0;
             } else {
@@ -449,18 +426,67 @@ export default {
                     this.tempURLErr = false;
                 }
             }
-        }
+        },
 
+        imgOnOk() {
+            // var op = 0;
+            // var than = this;
+            // var interval = null
+            // try {
+            //     interval = setInterval(function(){
+            //         than.$refs.webbgimg.style.opacity=op+' ';
+            //         than.$refs.webbgimg.style.display = 'block'
+            //         op = op+0.1
+            //         if(op>=0.9){
+            //             clearInterval(interval);
+            //         }
+            //     },100)
+            // }catch (err){
+            //     clearInterval(interval);
+            //     console.log(err)
+            // }
+        },
+        imgOnError() {
+            console.log("imgOnError-none")
+            this.$refs.webbgimg.style.display = 'none'
+        },
+        //颜色排序
+        sortColor(colors) {
+            var than = this
+            return colors.sort(function (a, b) {
+                //由深到浅
+                return than.grayLevel(a) - than.grayLevel(b)
+            })
+        },
+        grayLevel(color) {
+            //必须要是rgb格式
+            var arr = this.getMid(color).split(',')
+            var r = arr[0], g = arr[1], b = arr[2];
+            return r * 0.299 + g * 0.587 + b * 0.114
+        },
+        getMid(str) {
+            var left = str.indexOf('(') + 1;
+            var right = str.indexOf(')');
+            return str.slice(left, right);
+        },
+        //判断颜色深浅色
+        hexToRgb(colorChange) {   //HEX十六进制颜色值转换为RGB(A)颜色值
+            var grayLevel = colorChange[0] * 0.299 + colorChange[1] * 0.587 + colorChange[2] * 0.114;
+            if (grayLevel >= 192) {//浅色模式
+                //浅色背景 用深色文字
+                return '#28272b';
+            } else {
+                //深色背景 用浅色文字
+                return '#dadada';
+            }
+        },
     },
-    mounted() {
-        this.$Spin.show();
-        this.getUploadInfo();
-        this.uploadList = this.$refs.upload.fileList;
-    },
+
     components: {
         albumList,
         vueQr,
-        Treeselect
+        Treeselect,
+        UploaderList
     },
     computed: {
         getUploadSwitch: function () {
diff --git a/src/components/comp/uploadList.vue b/src/components/comp/uploadList.vue
new file mode 100644
index 0000000..9f62e5a
--- /dev/null
+++ b/src/components/comp/uploadList.vue
@@ -0,0 +1,491 @@
+<template>
+  <div>
+    <div id="uploadDiv" style=" height: 180px;width: 100%; border-radius: 5px;cursor: pointer; text-align: center;">
+      <div class="up_style">
+        <Icon type="md-camera" size="48" :color="icocolor"/>
+      </div>
+      <p style="position: relative; top: 106px; font-size: 1.7vh; letter-spacing:2px; " :style="{'color':icocolor}">
+        &nbsp;拖拽上传</p>
+    </div>
+    <!--@file-complete="fileComplete"-->
+    <uploader v-show="false" :options="options" class="uploader-example" ref="uploader"
+              :file-status-text="statusText"
+              @file-added="fileAdded"
+              @files-submitted="onFilesSubmitted"
+              @file-success="fileSuccess"
+              @complete="complete"
+              @file-removed="fileRemoved"
+              @file-error="fileError">
+      <uploader-unsupport></uploader-unsupport>
+      <uploader-drop>
+
+        <uploader-btn v-show="false" :attrs="attrs">选择图像</uploader-btn>
+        <!--      <uploader-btn :attrs="attrs">select images</uploader-btn>-->
+        <!--      <uploader-btn :directory="true">选择文件夹</uploader-btn>-->
+      </uploader-drop>
+      <Modal width="720" v-model="progressModal" :footer-hide="true">
+        <br/>
+        <div style="height: 400px;overflow: auto;text-align: center;">
+          <uploader-list>
+            <!--通过slot-scope绑定文件实例-->
+            <div slot-scope="props">
+              <div class="nofilelist_sty" v-if="props.fileList<1">
+                <p>
+                  <Icon type="logo-dropbox" size="80"/>
+                </p>
+                <p style="font-size: 14px">暂无上传记录</p></div>
+              <div v-else v-for="file in props.fileList" :key="file.id">
+                <uploader-file
+                    :class="['file_' + file.id, customStatus,'my-filelist']"
+                    :list="true"
+                    :file="file"
+                ></uploader-file>
+              </div>
+            </div>
+          </uploader-list>
+        </div>
+      </Modal>
+    </uploader>
+
+  </div>
+
+</template>
+
+<script>
+//引入
+
+import {request} from "@/network/request";
+import md5 from "js-md5";
+import Bus from '../../assets/js/bus'
+import {v4 as uuidv4} from 'uuid';
+import SparkMD5 from 'spark-md5';
+
+export default {
+  name: "uploadList",
+  data() {
+    let self = this
+    return {
+      progressModal: false,
+      //详细的配置文档https://blog.csdn.net/NineWaited/article/details/126594331
+      options: {
+        target: this.$http.defaults.baseURL + '/uploadChunkFile',
+        testChunks: false, // 是否分片-不分片
+        allowDuplicateUploads: true,//上传过的文件可以再上传
+        simultaneousUploads: 2,//默认是3
+        chunkSize: 20 * 1024 * 1024,//分块的大小，默认就是1m = 1*1024*1024
+        // 额外的自定义查询参数
+        query: (file, chunk) => {
+          return {
+            ...file.params,
+          }
+        },
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'usersOrigin': md5(window.location.protocol + '//' + window.location.host),
+          "Authorization": localStorage.getItem('Authorization')
+        },
+        // 处理请求结果
+        processResponse(response, cb, file, chunk) {
+
+          const json = JSON.parse(response)
+          if (json.data.totalChunks == json.data.chunkNumber) {
+            if (json.code == '200') {
+              setTimeout(() => {
+                let ret = self.fileComplete(file);
+                ret.then(function (data) {
+                  return cb(null, response)
+                }, function (info) {
+                  console.log('fileComplete Error')
+                });
+              }, 100)
+
+            } else {
+              return cb(true, response)
+            }
+          } else {
+            //说明不是最后一个分块，正常返回值
+            return cb(null, response)
+          }
+
+          // self.tests('12332322')
+
+        },
+        processParams: function (params, File) {
+          // var datas = File.params;
+          // if(params.totalChunks>1){
+          //   datas.isChunk='yes'
+          // }else{
+          //   datas.isChunk='no'
+          // }
+          // File.params = datas
+          // Bus.$emit('processParams');
+
+          return params;
+        },
+        parseTimeRemaining: function (timeRemaining, parsedTimeRemaining) {
+          return parsedTimeRemaining
+              .replace(/\syears?/, '年')
+              .replace(/\days?/, '天')
+              .replace(/\shours?/, '小时')
+              .replace(/\sminutes?/, '分钟')
+              .replace(/\sseconds?/, '秒')
+        }
+        // checkChunkUploadedByResponse: function (chunk, message) {
+        //   let objMessage = JSON.parse(message);
+        //   console.log('objMessage',objMessage);
+        //   // 获取当前的上传块的集合
+        //   let chunkNumbers = objMessage.result.chunkNumbers;
+        //   // 判断当前的块是否被该集合包含，从而判定是否需要跳过
+        //   return (chunkNumbers || []).indexOf(chunk.offset + 1) >= 0;
+        // }
+      },
+      attrs: {
+        accept: 'image/*'
+      },
+      statusText: {
+        success: '成功',
+        error: '出错',
+        uploading: '上传中',
+        paused: '暂停中',
+        waiting: '等待中'
+      },
+      customStatus: '',
+      uploadData: null,
+      imgCount: 0,
+      errType: 0,
+    }
+  },
+  props: {
+    // 上传地址
+    icocolor: {
+      type: String,
+      default: "#515860"
+    },
+  },
+  methods: {
+    getFileMD5(file) {
+      return new Promise((resolve, reject) => {
+        try {
+          var fileReader = new FileReader();
+          var spark = new SparkMD5.ArrayBuffer();
+          fileReader.readAsArrayBuffer(file);
+          fileReader.onload = function (e) {
+            spark.append(e.target.result);
+            var md5 = spark.end();
+            resolve(md5)
+          };
+        } catch (e) {
+          reject(null)
+        }
+      })
+    },
+    showProgressModel() {
+      this.progressModal = true;
+    },
+    setAssign(e) {
+      var uploader = this.$refs.uploader.uploader;
+      uploader.assignDrop(e)
+    },
+    setUploadInfo(json) {
+      this.uploadData = json;
+    },
+    // setAssignDrop(e){
+    //   var uploader = this.$refs.uploader.uploader;
+    //   uploader.assignDrop(e)
+    // },
+    // 所有的文件都上传成功
+    complete() {
+      // console.log('complete', arguments)
+    },
+    //添加文件后事件，可判断类型
+    fileAdded(file) {
+      file.params = {
+        uuid: uuidv4().replace(/-/g, ""),
+      }
+      Bus.$emit('fileAdded');
+
+      this.imgCount = this.imgCount + 1
+      var msg = ''
+      if ((file.size / 1024) > this.uploadData.filesize) {
+        msg = '[' + file.name + ']文件不可超过' + (this.uploadData.filesize / 1024).toFixed(2) + 'MB'
+        this.errType = 1
+      }
+      //判断格式
+      if (file.fileType.indexOf('image/') == -1) {
+        msg = '[' + file.name + ']的文件格式不受支持'
+        this.errType = 2
+      }
+      if (this.imgCount > this.uploadData.imgcount) {
+        msg = '单次上传最多不得超过[' + this.uploadData.imgcount + ']个文件'
+        this.errType = 3
+      }
+      // this.statusSet(file.id, 'md5')
+      if (msg != '') {
+        file.ignored = true
+        if (this.errType == 3) {
+          this.imgCount > this.uploadData.imgcount + 1 ? this.errType = 0 : this.errType = 3
+        }
+        if (this.errType > 0) {
+          this.$Notice.warning({
+            title: '文件上传限制',
+            desc: msg
+          });
+        }
+      }
+    },
+    //和 filesAdded 类似，但是是文件已经加入到上传列表中，一般用来开始整个的上传
+    filesSubmitted(files, fileList, event) {
+
+    },
+    onFilesSubmitted(files, fileList, event) {
+      this.imgCount = 0
+      this.errType = 0
+      if (fileList.length > 0) {
+        //弹出上传记录列表窗
+        this.showProgressModel();
+      }
+      //替换原有的上传进度列表的图标
+      this.$nextTick(() => {
+        for (let i = 0; i < files.length; i++) {
+          var dom = document.querySelector(`.file_${files[i].id} .uploader-file-name`);
+          dom.innerHTML = '<span style="width: 24px; height: 24px; display: inline-block; vertical-align: top; margin-top: 8px; margin-right: 20px;"><svg t="1675929824801" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3858" width="24" height="24"><path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="3859"></path><path d="M955.733333 238.933333a170.666667 170.666667 0 1 0-341.333333 0 170.666667 170.666667 0 0 0 341.333333 0zM448.7168 290.816a34.133333 34.133333 0 0 0-59.255467 0L38.673067 904.635733A34.133333 34.133333 0 0 0 68.3008 955.733333h701.576533a34.133333 34.133333 0 0 0 29.627734-51.063466L448.750933 290.781867z" fill="#11AA66" p-id="3860"></path><path d="M721.3056 529.749333a34.133333 34.133333 0 0 1 59.255467 0l214.254933 374.920534A34.133333 34.133333 0 0 1 965.188267 955.733333H536.6784a34.133333 34.133333 0 0 1-29.627733-51.063466l214.254933-374.954667z" fill="#FFAA44" p-id="3861"></path></svg></span>' + dom.innerText
+        }
+      })      // console.log('触发 onFilesSubmitted 事件',files, fileList)
+    },
+    // 一个根文件（文件夹）成功上传完成。
+    async fileComplete(file) {
+      var ret = await this.getFileMD5(file.file);
+      console.log('合并文件的对象=', file)
+      return await new Promise((resolve, reject) => {
+
+
+        this.statusSet(file.id, 'processing')
+        // const file = arguments[0].file;
+        var obj = {}
+        // if(arguments[0].params.isChunk=='no'){
+        //   return
+        // }
+        obj.md5 = ret
+        obj.uuid = file.params.uuid
+        obj.day = window.localStorage.getItem('img_day')
+        obj.filename = file.name
+        obj.imgIdentifier = file.uniqueIdentifier//arguments[0].uniqueIdentifier
+        request(
+            "/processFile",
+            obj, 1800000).then(res => {
+          this.$Spin.hide();
+          this.statusRemove(file.id)
+          if (res.status == 200) {
+            var json = res.data.data;
+            if (json != null) {
+              this.$emit('returnImgData', json);
+            }
+            resolve(true);
+          } else {
+            this.$Message.error("请求时出现错误");
+            reject(false)
+          }
+        }).catch(err => {
+          console.log(err);
+          reject(false)
+        })
+      })
+
+    },
+    //文件成功上传，第一个参数rootFile是或包含File对象，file是File对象，message是服务端响应内容字符串，chunk是chunk实例，应该是本文件最后一个块实例。chunk.xhr.status就是这个文件上传的响应码
+    fileSuccess(rootFile, file, message, chunk) {
+      // var data = JSON.parse(message)
+      // if(data.code=="202"){
+      //   var json = data.data;
+      //   this.statusSet(file.id, 'ok')//transcoding
+      //   if(json!=null){
+      //     this.$emit('returnImgData',json);
+      //   }
+      // }
+
+    },
+    //一个文件被移除
+    fileRemoved(file) {
+
+    },
+    //文件上传过程出错
+    fileError(rootFile, file, message, chunk) {
+
+    },
+    /**
+     * 新增的自定义的状态: 'md5'、'merging'、'transcoding'、'failed'
+     * @param id
+     * @param status
+     */
+    statusSet(id, status) {
+      let statusMap = {
+        md5: {
+          text: '校验MD5',
+          bgc: '#fff'
+        },
+        ok: {
+          text: '上传成功',
+          // bgc: '#e2eeff'
+        },
+        processing: {
+          text: '处理中',
+          bgc: '#e2eeff'
+        },
+        failed: {
+          text: '上传失败',
+          bgc: '#e2eeff'
+        }
+      }
+
+      this.customStatus = status
+      this.$nextTick(() => {
+        const statusTag = document.createElement('p')
+        statusTag.className = `custom-status-${id} custom-status`
+        if (status == 'ok') {
+          statusTag.innerHTML = '<span style="line-height: 60px;" title="上传完成"><svg t="1675321805849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5782" width="18" height="18"><path d="M830.8736 349.707378 441.890133 738.668089C433.3568 747.201422 421.774222 752.002844 409.713778 752.002844 397.653333 752.002844 386.070756 747.201422 377.537422 738.668089L193.149156 554.234311C175.354311 536.462222 175.354311 507.653689 193.149156 489.8816 210.921244 472.109511 239.707022 472.109511 257.501867 489.8816L409.713778 642.139022 766.520889 285.354667C784.292978 267.582578 813.101511 267.582578 830.8736 285.354667 848.645689 303.126756 848.645689 331.935289 830.8736 349.707378M512 0C229.239467 0 0 229.239467 0 512 0 794.760533 229.239467 1024 512 1024 794.783289 1024 1024 794.760533 1024 512 1024 229.239467 794.783289 0 512 0" fill="#21B5B5" p-id="5783"></path></svg></span>'
+        } else if (status == 'processing') {
+          document.querySelector(`.file_${id}`).style.backgroundColor = 'rgb(226, 238, 255)'
+          statusTag.innerHTML = statusMap[status].text//'<span style="line-height: 60px;" title="上传完成"><svg t="1675321805849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5782" width="18" height="18"><path d="M830.8736 349.707378 441.890133 738.668089C433.3568 747.201422 421.774222 752.002844 409.713778 752.002844 397.653333 752.002844 386.070756 747.201422 377.537422 738.668089L193.149156 554.234311C175.354311 536.462222 175.354311 507.653689 193.149156 489.8816 210.921244 472.109511 239.707022 472.109511 257.501867 489.8816L409.713778 642.139022 766.520889 285.354667C784.292978 267.582578 813.101511 267.582578 830.8736 285.354667 848.645689 303.126756 848.645689 331.935289 830.8736 349.707378M512 0C229.239467 0 0 229.239467 0 512 0 794.760533 229.239467 1024 512 1024 794.783289 1024 1024 794.760533 1024 512 1024 229.239467 794.783289 0 512 0" fill="#21B5B5" p-id="5783"></path></svg></span>'
+        } else {
+          statusTag.innerText = statusMap[status].text
+        }
+        statusTag.style.backgroundColor = statusMap[status].bgc
+        // document.querySelector(`.file_${id} .uploader-file-status span`).style.display = 'none'
+        let spanList = document.querySelectorAll(`.file_${id} .uploader-file-status>span`)
+        // console.log(spanList);
+        if (spanList.length > 0) {
+          for (let i = 0; i < spanList.length; i++) {
+            spanList[i].style.display = 'none'
+          }
+        }
+        const statusWrap = document.querySelector(`.file_${id} .uploader-file-status`)
+        statusWrap.appendChild(statusTag)
+      })
+    },
+    statusRemove(id) {
+      this.customStatus = ''
+      this.$nextTick(() => {
+        const statusTag = document.querySelector(`.custom-status-${id}`)
+        statusTag.remove()
+      })
+    },
+
+  },
+  mounted() {
+    var uploader = this.$refs.uploader.uploader;
+    uploader.assignBrowse(document.getElementById('uploadDiv'))
+    this.$nextTick(() => {
+      window.uploader = this.$refs.uploader.uploader
+    })
+  }
+
+
+}
+</script>
+
+<style scoped>
+
+.up_style {
+  /*background-image: url("../../assets/img/upload-img.svg");*/
+  background-size: contain; /*按比例缩放*/
+  background-repeat: no-repeat; /*还有repeat-x,y等*/
+  background-position: 100% 100%;
+  height: 50px;
+  width: 50px;
+  position: absolute;
+  left: 50%;
+  right: 50%;
+  transform: translate(-50%, -50%);
+  top: 45%;
+}
+
+.uptext_style {
+  background-image: url("../../assets/img/text/upimg_text.png");
+  background-size: contain; /*按比例缩放*/
+  background-repeat: no-repeat; /*还有repeat-x,y等*/
+  background-position: 100% 100%;
+  height: 45px;
+  width: 120px;
+  position: absolute;
+  left: 50%;
+  right: 50%;
+  transform: translate(-50%, -50%);
+  bottom: 3px;
+
+}
+
+.uploader-example {
+  height: 280px;
+}
+
+/*隐藏暂停按钮*/
+.uploader-list /deep/ .uploader-file-actions > span:first-child {
+  display: none;
+  float: left;
+  width: 16px;
+  height: 16px;
+  margin-top: 16px;
+  margin-right: 10px;
+  cursor: pointer;
+}
+
+.nofilelist_sty {
+  margin-top: 120px;
+}
+
+</style>
+<style>
+.uploader-file-icon {
+  display: none;
+}
+
+
+.upload-img {
+  font-weight: bold;
+  -webkit-transition-property: -webkit-transform;
+  -webkit-transition-duration: 1s;
+  -moz-transition-property: -moz-transform;
+  -moz-transition-duration: 1s;
+  -webkit-animation: rotate 3s linear infinite;
+  -moz-animation: rotate 3s linear infinite;
+  -o-animation: rotate 3s linear infinite;
+  animation: rotate 3s linear infinite;
+}
+
+@-webkit-keyframes rotate {
+  from {
+    -webkit-transform: rotate(0deg)
+  }
+  to {
+    -webkit-transform: rotate(360deg)
+  }
+}
+
+@-moz-keyframes rotate {
+  from {
+    -moz-transform: rotate(0deg)
+  }
+  to {
+    -moz-transform: rotate(359deg)
+  }
+}
+
+@-o-keyframes rotate {
+  from {
+    -o-transform: rotate(0deg)
+  }
+  to {
+    -o-transform: rotate(359deg)
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg)
+  }
+  to {
+    transform: rotate(359deg)
+  }
+}
+
+</style>
diff --git a/src/main.js b/src/main.js
index 30e7161..3126149 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,7 @@ import '@/assets/css/font.less';
 import './assets/css/style.css'
 import md5 from "js-md5";
 import "babel-polyfill";
+import uploader from 'vue-simple-uploader'
 import locStorage from './assets/js/utils/locStorage.js'
 import img404 from './assets/img/img404.jpg'
 import imgloading from './assets/img/imgloading.gif'
@@ -99,7 +100,7 @@ var options = {
     timeToIdle: 4000
 };
 
-Vue.use(Iview).use(preview, options).use(Viewer, {
+Vue.use(Iview).use(preview, options).use(uploader).use(Viewer, {
     defaultOptions: {
         navbar: false
     }
diff --git a/src/views/index.vue b/src/views/index.vue
index ad073df..644344e 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,7 +1,8 @@
 <template>
   <Layout
       style="width: 100%;height: 100%;background: #fff;background-repeat: no-repeat; background-size: 100% 100%; -moz-background-size: 100% 100%; ">
-    <div style="width: 100%;height: 100%;background-color: rgba(51,51,51,0.36);position: fixed;z-index: 1;" @click="showMenu" v-show="isCollapsed"></div>
+    <div style="width: 100%;height: 100%;background-color: rgba(51,51,51,0.36);position: fixed;z-index: 1;"
+         @click="showMenu" v-show="isCollapsed"></div>
     <Drawer title="资讯" placement="top" height="363" :closable="false" v-model="$store.state.noticePopup"
             v-if="(this.$store.state.metaInfo.explain!='' && this.$store.state.metaInfo.explain!=null)">
       <div
@@ -16,97 +17,101 @@
       </div>
     </Drawer>
 
-<!--    <Header-->
-<!--        :style="{position: 'fixed', width: '100%',zIndex:'1',padding:'0 10px',height: '64px',background: '#fff',boxShadow:'0 1px 6px 0 rgba(32, 33, 36, 0.28)'}"-->
-<!--        class="animate__animated animate__fadeInDownBig">-->
-<!--      <Menu mode="horizontal" style="height: 64px;" theme="light" :active-name="$route.params.activeName">-->
-<!--        <div class="layout-logo" style="height: 100%;">-->
-<!--          <img :src="($store.state.metaInfo.logo==null || $store.state.metaInfo.logo=='')?hellohaologo:$store.state.metaInfo.logo"-->
-<!--               style="width: 135px;height: 100%;margin-left: 35px;"/>-->
-<!--        </div>-->
-<!--        <div class="layout-nav">-->
-<!--          <template v-if="screenWidth<=568">-->
-<!--            <MenuItem name="ishome" @click.native="homeClick">-->
-<!--              <Icon type="md-home" style="font-size: 30px; line-height: 2;color: #515a6e;"/>-->
-<!--            </MenuItem>-->
-<!--            <Dropdown trigger="click" name="iscontrol" style="margin-right: 26px;">-->
-<!--              <a href="javascript:void(0)" style="color: #515a6e;text-decoration: none;">-->
-<!--                <Icon type="md-speedometer" style="font-size: 30px; line-height: 2;"/>&nbsp;-->
-<!--                <Icon type="ios-arrow-down"></Icon>-->
-<!--              </a>-->
-<!--              <DropdownMenu slot="list">-->
-<!--                <template @click.native="controlClick" v-if="this.$store.state.loginStatus">-->
-<!--                  <DropdownItem name="isadmin" @click.native="adminClick">控制台</DropdownItem>-->
-<!--                  <DropdownItem name="exit" @click.native="exit">退出</DropdownItem>-->
-<!--                </template>-->
-<!--                <template @click.native="loginClick" v-else>-->
-<!--                  <DropdownItem name="login" @click.native="loginClick">登录</DropdownItem>-->
-<!--                </template>-->
-<!--                <DropdownItem name="about" @click.native="about">关于</DropdownItem>-->
-<!--              </DropdownMenu>-->
-<!--            </Dropdown>-->
-<!--          </template>-->
-<!--          <template v-else>-->
-<!--            <MenuItem name="ishome" @click.native="homeClick">-->
-<!--              <Icon type="md-home" style="color: rgb(81, 90, 110);"/>-->
-<!--              <span style="color: rgb(81, 90, 110);">首页</span>-->
-<!--            </MenuItem>-->
-<!--            <Dropdown trigger="click" name="iscontrol" style="margin-right: 26px;">-->
-<!--              <a href="javascript:void(0)" style="color: #FFF;text-decoration: none;">-->
-<!--                <Icon type="md-speedometer" style="color: rgb(81, 90, 110);"/>&nbsp;-->
-<!--                <span style="color: rgb(81, 90, 110);">管理</span>-->
-<!--                <Icon type="ios-arrow-down" style="color: rgb(81, 90, 110);"></Icon>-->
-<!--              </a>-->
-<!--              <DropdownMenu slot="list">-->
-<!--                <template @click.native="controlClick" v-if="this.$store.state.loginStatus">-->
-<!--                  <DropdownItem name="isadmin" @click.native="adminClick">控制台</DropdownItem>-->
-<!--                  <DropdownItem name="exit" @click.native="exit">退出</DropdownItem>-->
-<!--                </template>-->
-<!--                <template @click.native="loginClick" v-else>-->
-<!--                  <DropdownItem name="login" @click.native="loginClick">登录</DropdownItem>-->
-<!--                  <DropdownItem name="login" @click.native="registerClick">注册</DropdownItem>-->
-<!--                </template>-->
-<!--                <DropdownItem name="about" @click.native="about">关于</DropdownItem>-->
-<!--              </DropdownMenu>-->
-<!--            </Dropdown>-->
-<!--          </template>-->
-<!--          <Badge :status="$store.state.loginStatus?'success':'warning'"/>-->
-<!--        </div>-->
-<!--      </Menu>-->
-<!--    </Header>-->
-
-
-    <Header :style="{position: 'fixed', width: '100%',zIndex:'2',padding:'0 10px',height: '64px',background: 'rgba(255, 255, 255, .55)',boxShadow:'0 1px 6px 0 rgba(32, 33, 36, 0.28)'}" class="animate__animated animate__fadeInDownBig" >
-      <Menu mode="horizontal" style="height: 64px;background: #FFF0 "  :active-name="$route.params.activeName">
+    <!--    <Header-->
+    <!--        :style="{position: 'fixed', width: '100%',zIndex:'1',padding:'0 10px',height: '64px',background: '#fff',boxShadow:'0 1px 6px 0 rgba(32, 33, 36, 0.28)'}"-->
+    <!--        class="animate__animated animate__fadeInDownBig">-->
+    <!--      <Menu mode="horizontal" style="height: 64px;" theme="light" :active-name="$route.params.activeName">-->
+    <!--        <div class="layout-logo" style="height: 100%;">-->
+    <!--          <img :src="($store.state.metaInfo.logo==null || $store.state.metaInfo.logo=='')?hellohaologo:$store.state.metaInfo.logo"-->
+    <!--               style="width: 135px;height: 100%;margin-left: 35px;"/>-->
+    <!--        </div>-->
+    <!--        <div class="layout-nav">-->
+    <!--          <template v-if="screenWidth<=568">-->
+    <!--            <MenuItem name="ishome" @click.native="homeClick">-->
+    <!--              <Icon type="md-home" style="font-size: 30px; line-height: 2;color: #515a6e;"/>-->
+    <!--            </MenuItem>-->
+    <!--            <Dropdown trigger="click" name="iscontrol" style="margin-right: 26px;">-->
+    <!--              <a href="javascript:void(0)" style="color: #515a6e;text-decoration: none;">-->
+    <!--                <Icon type="md-speedometer" style="font-size: 30px; line-height: 2;"/>&nbsp;-->
+    <!--                <Icon type="ios-arrow-down"></Icon>-->
+    <!--              </a>-->
+    <!--              <DropdownMenu slot="list">-->
+    <!--                <template @click.native="controlClick" v-if="this.$store.state.loginStatus">-->
+    <!--                  <DropdownItem name="isadmin" @click.native="adminClick">控制台</DropdownItem>-->
+    <!--                  <DropdownItem name="exit" @click.native="exit">退出</DropdownItem>-->
+    <!--                </template>-->
+    <!--                <template @click.native="loginClick" v-else>-->
+    <!--                  <DropdownItem name="login" @click.native="loginClick">登录</DropdownItem>-->
+    <!--                </template>-->
+    <!--                <DropdownItem name="about" @click.native="about">关于</DropdownItem>-->
+    <!--              </DropdownMenu>-->
+    <!--            </Dropdown>-->
+    <!--          </template>-->
+    <!--          <template v-else>-->
+    <!--            <MenuItem name="ishome" @click.native="homeClick">-->
+    <!--              <Icon type="md-home" style="color: rgb(81, 90, 110);"/>-->
+    <!--              <span style="color: rgb(81, 90, 110);">首页</span>-->
+    <!--            </MenuItem>-->
+    <!--            <Dropdown trigger="click" name="iscontrol" style="margin-right: 26px;">-->
+    <!--              <a href="javascript:void(0)" style="color: #FFF;text-decoration: none;">-->
+    <!--                <Icon type="md-speedometer" style="color: rgb(81, 90, 110);"/>&nbsp;-->
+    <!--                <span style="color: rgb(81, 90, 110);">管理</span>-->
+    <!--                <Icon type="ios-arrow-down" style="color: rgb(81, 90, 110);"></Icon>-->
+    <!--              </a>-->
+    <!--              <DropdownMenu slot="list">-->
+    <!--                <template @click.native="controlClick" v-if="this.$store.state.loginStatus">-->
+    <!--                  <DropdownItem name="isadmin" @click.native="adminClick">控制台</DropdownItem>-->
+    <!--                  <DropdownItem name="exit" @click.native="exit">退出</DropdownItem>-->
+    <!--                </template>-->
+    <!--                <template @click.native="loginClick" v-else>-->
+    <!--                  <DropdownItem name="login" @click.native="loginClick">登录</DropdownItem>-->
+    <!--                  <DropdownItem name="login" @click.native="registerClick">注册</DropdownItem>-->
+    <!--                </template>-->
+    <!--                <DropdownItem name="about" @click.native="about">关于</DropdownItem>-->
+    <!--              </DropdownMenu>-->
+    <!--            </Dropdown>-->
+    <!--          </template>-->
+    <!--          <Badge :status="$store.state.loginStatus?'success':'warning'"/>-->
+    <!--        </div>-->
+    <!--      </Menu>-->
+    <!--    </Header>-->
+
+
+    <Header
+        :style="{position: 'fixed', width: '100%',zIndex:'2',padding:'0 10px',height: '64px',background: 'rgba(255, 255, 255, .55)',boxShadow:'0 1px 6px 0 rgba(32, 33, 36, 0.28)'}"
+        class="animate__animated animate__fadeInDownBig">
+      <Menu mode="horizontal" style="height: 64px;background: #FFF0 " :active-name="$route.params.activeName">
         <div class="layout-logo" style="height: 100%;">
-<!--          <img :src="(metaInfo.logo==null || metaInfo.logo=='')?hellohaologo:metaInfo.logo" style="width: 135px;margin-left: 10px;vertical-align: middle;" />-->
-          <img :src="($store.state.metaInfo.logo==null || $store.state.metaInfo.logo=='')?hellohaologo:$store.state.metaInfo.logo"
-               style="width: 135px;margin-left: 10px;vertical-align: middle;"/>
+          <!--          <img :src="(metaInfo.logo==null || metaInfo.logo=='')?hellohaologo:metaInfo.logo" style="width: 135px;margin-left: 10px;vertical-align: middle;" />-->
+          <img
+              :src="($store.state.metaInfo.logo==null || $store.state.metaInfo.logo=='')?hellohaologo:$store.state.metaInfo.logo"
+              style="width: 135px;margin-left: 10px;vertical-align: middle;"/>
         </div>
         <div class="layout-nav">
           <template v-if="screenWidth<=1024">
             <Badge :status="$store.state.loginStatus?'success':'warning'" style="    top: -23px;
-    right: -64px;" />
-            <div @click="showMenu" :class="{'is-active':isMenu=='show'}" class="hamburger hamburger--collapse" style="z-index: 2">
+    right: -64px;"/>
+            <div @click="showMenu" :class="{'is-active':isMenu=='show'}" class="hamburger hamburger--collapse"
+                 style="z-index: 2">
               <div class="hamburger-box">
                 <div class="hamburger-inner"></div>
               </div>
             </div>
           </template>
           <template v-else>
-            <MenuItem name="ishome" @click.native="homeClick" >
-              <Icon type="md-home" style="color: rgb(81, 90, 110);" />
+            <MenuItem name="ishome" @click.native="homeClick">
+              <Icon type="md-home" style="color: rgb(81, 90, 110);"/>
               <span style="color: rgb(81, 90, 110);">首 页</span>
             </MenuItem>
             <Dropdown trigger="click" name="iscontrol" style="margin-right: 18px;">
               <a href="javascript:void(0)" style="color: #FFF;text-decoration: none;">
-                <Icon type="md-person" style="color: rgb(81, 90, 110);" />&nbsp;
+                <Icon type="md-person" style="color: rgb(81, 90, 110);"/>&nbsp;
                 <span style="color: rgb(81, 90, 110);">我 的</span>
                 <Icon type="ios-arrow-down" style="color: rgb(81, 90, 110);"></Icon>
               </a>
               <DropdownMenu slot="list">
                 <template @click.native="controlClick" v-if="this.$store.state.loginStatus">
-                  <DropdownItem name="isadmin"  @click.native="adminClick">个人中心</DropdownItem>
+                  <DropdownItem name="isadmin" @click.native="adminClick">个人中心</DropdownItem>
                   <DropdownItem name="exit" @click.native="exit">退 出</DropdownItem>
                 </template>
                 <template @click.native="loginClick" v-else>
@@ -116,7 +121,7 @@
                 <DropdownItem name="about" @click.native="about">关 于</DropdownItem>
               </DropdownMenu>
             </Dropdown>
-            <Badge :status="$store.state.loginStatus?'success':'warning'" />
+            <Badge :status="$store.state.loginStatus?'success':'warning'"/>
           </template>
 
         </div>
@@ -177,18 +182,40 @@
     </Modal>
 
     <!--    移动端状态栏   -->
-    <div v-show="isMenu!='none'" class="move-style-index animate__animated" :class="{'animate__fadeInDown' :isMenu=='show','animate__fadeOutUp' :isMenu=='hide'}">
+    <div v-show="isMenu!='none'" class="move-style-index animate__animated"
+         :class="{'animate__fadeInDown' :isMenu=='show','animate__fadeOutUp' :isMenu=='hide'}">
       <List size="small" slot="content" :split="false">
-        <ListItem @click.native="homeClick" style="text-indent: 26px;"><Icon type="md-home" size="16" /> 首 页</ListItem>
+        <ListItem @click.native="homeClick" style="text-indent: 26px;">
+          <Icon type="md-home" size="16"/>
+          首 页
+        </ListItem>
         <template v-if="this.$store.state.loginStatus">
-          <ListItem @click.native="adminClick" style="text-indent: 26px;"><Icon type="md-contact" size="16" /> 个人中心</ListItem>
-          <ListItem @click.native="about" style="text-indent: 26px;"><Icon type="md-information-circle" size="16" /> 关 于</ListItem>
-          <ListItem style="text-indent: 26px;" @click="exit"><Icon type="md-exit" size="16" /> 退 出</ListItem>
+          <ListItem @click.native="adminClick" style="text-indent: 26px;">
+            <Icon type="md-contact" size="16"/>
+            个人中心
+          </ListItem>
+          <ListItem @click.native="about" style="text-indent: 26px;">
+            <Icon type="md-information-circle" size="16"/>
+            关 于
+          </ListItem>
+          <ListItem style="text-indent: 26px;" @click="exit">
+            <Icon type="md-exit" size="16"/>
+            退 出
+          </ListItem>
         </template>
         <template v-else>
-          <ListItem @click.native="loginClick" style="text-indent: 26px;"><Icon type="ios-navigate" size="16" /> 登 录</ListItem>
-          <ListItem @click.native="registerClick" style="text-indent: 26px;"><Icon type="md-person-add" size="16" /> 注 册</ListItem>
-          <ListItem @click.native="about" style="text-indent: 26px;"><Icon type="md-information-circle" size="16" /> 关 于</ListItem>
+          <ListItem @click.native="loginClick" style="text-indent: 26px;">
+            <Icon type="ios-navigate" size="16"/>
+            登 录
+          </ListItem>
+          <ListItem @click.native="registerClick" style="text-indent: 26px;">
+            <Icon type="md-person-add" size="16"/>
+            注 册
+          </ListItem>
+          <ListItem @click.native="about" style="text-indent: 26px;">
+            <Icon type="md-information-circle" size="16"/>
+            关 于
+          </ListItem>
         </template>
 
       </List>
@@ -205,7 +232,7 @@ export default {
 
   data() {
     return {
-      isMenu:'none',
+      isMenu: 'none',
       isCollapsed: false,
       noticeSwitch: false,
       urlTexts: '',
@@ -240,13 +267,36 @@ export default {
       return (() => {
         window.screenWidth = document.body.clientWidth
         this.screenWidth = window.screenWidth
-        if( window.screenWidth>1024){
+        if (window.screenWidth > 1024) {
           this.isMenu = 'none'
         }
         //console.log("屏幕宽度=="+this.screenWidth);
       })()
     }
 
+
+    document.addEventListener('paste', (event) => {
+      const items = (event.clipboardData || window.clipboardData).items
+      let file = null
+      if (!items || items.length === 0) {
+        this.$Message.error('当前浏览器不支持本地或请打开图片再复制')
+        return
+      }
+      // 搜索剪切板items
+      for (let i = 0; i < items.length; i++) {
+        // console.log('==>'+items[i].type);
+        if (items[i].type.indexOf('image') !== -1) {
+          file = items[i].getAsFile()
+          break
+        }
+      }
+      if (file == null) {
+        return
+      }
+      this.$refs.indexTarget.sendImgData(file)
+
+    })
+
   },
   methods: {
 
@@ -403,16 +453,16 @@ export default {
         this.$Message.error('服务器请求错误');
       })
     },
-    showMenu(){
-      if(this.isMenu=='none'){
-        this.isMenu='show'
+    showMenu() {
+      if (this.isMenu == 'none') {
+        this.isMenu = 'show'
         this.isCollapsed = true
-      }else{
-        if(this.isMenu=='show'){
-          this.isMenu='hide'
+      } else {
+        if (this.isMenu == 'show') {
+          this.isMenu = 'hide'
           this.isCollapsed = false
-        }else{
-          this.isMenu='show'
+        } else {
+          this.isMenu = 'show'
           this.isCollapsed = true
         }
       }
@@ -431,6 +481,7 @@ export default {
 .animate__fadeInDown {
   --animate-duration: .5s;
 }
+
 .animate__fadeOutUp {
   --animate-duration: .5s;
 }
@@ -562,6 +613,7 @@ body {
   border-radius: 4px;
   background-color: #515a6d;
 }
+
 .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner:after, .hamburger.is-active .hamburger-inner:before {
   background-color: #515a6d;
 }
diff --git a/src/views/upload.vue b/src/views/upload.vue
index 3b03ccd..f46e3a0 100644
--- a/src/views/upload.vue
+++ b/src/views/upload.vue
@@ -1,183 +1,196 @@
 <template>
-  <div>
-    <div class="mycard  animate__delay-0.8s">
-      <Row class="animate__animated animate__delay-0.8s animate__fadeInDown" style="overflow: hidden;">
-        <Col flex="1" style="padding: 8px;">
-          <Card class="cardShadow"
-                :class="{'Hollowed':true}"
-                @mouseover="mouseOver"
-                @mouseleave="mouseLeave"
-                style="background: #FFF;margin-top: 10px;padding-left: 8px; padding-right: 8px;cursor:pointer;"
-                @click.native="showUrlUploadMsg">
-            <div class="myupdiv">
-              <img :src="linkImg" referrerpolicy="no-referrer" style="width: 45px;" class="toolImg"/>
-              <p style="font-size: 18px;margin-top: 5px;line-height: 32px; font-size: 1.0vh;color: #808794;text-align: right;">
-                图片链接转存
-              </p>
-            </div>
-          </Card>
-        </Col>
+  <div id="bodydom">
+
+    <div class="mycard zdy-time800">
+      <Row class="animate__animated zdy-time800"
+           :class="{'animate__fadeInDown' : this.$store.state.preludeSwitch}" style="overflow: hidden;">
         <Col flex="1" style="padding: 8px;">
           <Card class="cardShadow"
                 :class="{'Hollowed':false}"
-                @mouseover="mouseOver"
-                @mouseleave="mouseLeave"
-                style="margin-top: 10px;padding-left: 8px; padding-right: 8px;cursor:pointer;"
+                :style="{'background':mytheme.myColor1}"
+                style="margin-top: 10px;padding-left: 8px; padding-right: 8px;cursor:pointer;box-shadow: 0 0 3px 3px rgb(0 0 0 / 5%);"
                 @click.native="showtermMsg">
+            <p v-if="$store.state.isMobile=='pc'" style="font-size: 1.8vh;text-align: left;font-weight: 600;">
+              <span :style="{'color':mytheme.myColor2}">存储期限</span>
+            </p>
             <div class="myupdiv">
               <img :src="timeImg" class="toolImg"/>
-              <p style="font-size: 18px;margin-top: 5px;line-height: 32px ;text-align: right;font-size: 1.0vh;color: #808794;">
+              <p style="font-size: 18px;margin-top: 5px;line-height: 32px ;text-align: right;font-size: 1.0vh;"
+                 :style="{'color':mytheme.myColor2}">
                 存储期限:
-                <span v-if="data.day==0">永久</span>
-                <span v-else>{{ data.day }}天</span>
+                <span v-if="img_day==0">永久</span>
+                <span v-else>{{ img_day }}天</span>
               </p>
             </div>
           </Card>
         </Col>
+
       </Row>
     </div>
 
-    <Card id="box" class="mycard upcard img_list_box animate__animated  animate__delay-0.8s animate__fadeInUp"
-          :class="{'Hollowed':false,'testback':true}">
-      <div class="img_list_arr" style="text-align:center;">
-        <div class="demo-upload-list animate__animated animate__delay-1.5s  animate__fadeIn"
-             v-for="(item,index) in uploadList" v-bind:key="item.uid">
-          <template v-if="item.status === 'finished'">
+    <Card class="mycard animate__animated zdy-time800" :style="{'overflow-y':'hidden','background':mytheme.myColor1}"
+          style="box-shadow: 0 0 3px 3px rgb(0 0 0 / 5%);"
+          :class="{'animate__fadeInUp' : this.$store.state.preludeSwitch,'Hollowed':false}">
+      <Row>
+        <Col span="12" v-show="!getUploadSwitch">
+          <div :style="{'border': 'dashed '+mytheme.myColor2+' 1px'}"
+               style="height:180px; cursor:pointer;border-radius: 5px;margin-right: 8px;">
+            <UploaderList
+                ref="UploaderList"
+                :icocolor="mytheme.myColor2"
+                @returnImgData="returnImgData"
+                :formData="{ guid: null, fileCategory: 1, code: 7 }"
+                :fileType="'targetFacility'"
+            />
+          </div>
+        </Col>
+        <Col span="12" v-show="!getUploadSwitch">
+          <div :style="{'border': 'dashed '+mytheme.myColor2+' 1px'}"
+               style="height:180px; cursor:pointer;border-radius: 5px;margin-left: 8px;" @click="showUrlUploadMsg">
+            <div class="url_style">
+              <Icon type="ios-cloud-download" size="48" :color="mytheme.myColor2"/>
+            </div>
+            <p style="font-size: 1.7vh;color: #494f56;text-align: center;position: relative; top: 106px; letter-spacing: 2px;"
+               :style="{'color':mytheme.myColor2}">
+              链接转存&nbsp;
+            </p>
+          </div>
+        </Col>
+        <Col span="24">
+          <div v-show="getUploadSwitch" class="uploadInfoSty" :style="{'color':mytheme.myColor2}">
+            <Icon type="md-camera" size="36" :color="mytheme.myColor2"/>&nbsp;&nbsp;or&nbsp;&nbsp;<Icon
+              type="ios-cloud-download" size="36" :color="mytheme.myColor2"/>
+            <br/>{{ this.uploadInfo.uploadInfo }}
+          </div>
+        </Col>
+      </Row>
+    </Card>
+    <!--  图片列表  animate__animated animate__fadeIn animate__delay-2s -->
+
+    <Card class="mycard animate__animated zdy-time" :style="{'min-height':'140px','background':mytheme.myColor1}"
+          style="box-shadow: 0 0 3px 3px rgb(0 0 0 / 5%);"
+          :class="{'animate__fadeIn' : this.$store.state.preludeSwitch,'Hollowed':false}">
+      <div class="record_css" :style="{'background':mytheme.myColor3}" @click="getProgress">上传进度</div>
+      <div class="img_list_arr" style="text-align:center;margin-top: 15px;" :style="{'color':mytheme.myColor3}">
+        <div v-if="uploadList.length==0" style="height: 140px;">
+          <div style="height: 140px;padding:20px 0;text-align: center;">
+            <h4>
+              <Icon type="ios-bulb" size="16"/>
+              小提示：
+            </h4>
+            <p style="font-size: 12px;line-height: 40px;">上传前可选择[上方三个小卡片],选择附加功能哦！</p>
+          </div>
+        </div>
+        <div v-else class="demo-upload-list" v-for="(item,index) in uploadList" v-bind:key="item.imguid">
+          <template>
             <img style="cursor:pointer;" preview="2" :data-pswp-uid="index" :preview-text="item.name"
-                 :src="item.response.data.url"/>
+                 :srcset="item.briefimgurl?item.briefimgurl:item.url" :src="item.url"/>
             <div class="demo-upload-list-cover">
               <Icon type="md-checkmark-circle" style="margin: 0 5px;"
-                    :style="{color:(selectIndexUid.indexOf(item.uid)>=0?'#43b984':'#c7c7c7')}"
-                    @click.native="clickImg(item.response.data.imguid,item.uid)" title="选择"></Icon>
+                    :style="{color:(selectIndex.indexOf(item.imguid)>=0?'#43b984':'#c7c7c7')}"
+                    @click.native="clickImg(item.imguid)" title="选择"></Icon>
               <Icon type="md-trash" style="margin: 0 5px;" @click.native="handleRemove(item)" title="删除图像"></Icon>
               <Icon type="md-git-branch" style="margin: 0 5px;" @click.native="getImgLink(item)"
                     title="分享链接"></Icon>
             </div>
           </template>
-          <template v-else>
-            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
-          </template>
         </div>
-        <Upload
-            ref="upload"
-            :paste="true"
-            :disabled="getUploadSwitch"
-            :show-upload-list="false"
-            :default-file-list="defaultList"
-            :format="uploadInfo.suffix"
-            :max-size="uploadInfo.filesize"
-            :on-success="handleSuccess"
-            :on-format-error="handleFormatError"
-            :on-exceeded-size="handleMaxSize"
-            :before-upload="handleBeforeUpload"
-            :on-error="uploadError"
-            :multiple="true"
-            :data="data"
-            :headers="headers"
-            :action="this.$http.defaults.baseURL+'/upload'"
-            type="drag"
-            style="display:contents;width:120px;">
-          <div style="width: 100%;height:118px;">
-            <div
-                style="width: 98px;height: 64px;margin: 0px auto;text-align: center;position: absolute;left: 0;right: 0;top: 30px;"
-                v-show="!getUploadSwitch">
-              <Icon type="ios-camera" size="36"></Icon>
-              <p style="text-align: center;color: #515a6e;font-size: xx-small;">拖拽图像到此处</p>
-            </div>
-            <div style="height: 64px;margin: 0px auto;text-align: center;position: absolute;left: 0;right: 0;top: 30px;"
-                 v-show="getUploadSwitch">
-              <p style="text-align: center;color: #515a6e;font-size: x-small;">{{ this.uploadInfo.uploadInfo }}</p>
-            </div>
-          </div>
-        </Upload>
-        <Modal v-model="visible" :footer-hide="true" width="620" :styles="{top: '20px'}">
-          <Tabs>
-            <TabPane label="画廊" icon="ios-images">
-              <album-list :albumlist="albumlist" @return-data='returnData'/>
-            </TabPane>
-            <TabPane label="更多" icon="ios-filing" disabled>更多功能待开发</TabPane>
-          </Tabs>
-        </Modal>
-
-        <Modal v-model="IsImgLink" :footer-hide="true">
-          <br/>
-          <List :split="false">
-            <ListItem>
-              <Input v-model="imgLinkForUrl" class="cobyOrderSn" data-clipboard-action="copy"
-                     :data-clipboard-text="imgLinkForUrl" @click.native="copy"><span slot="prepend">U R L</span></Input>
-            </ListItem>
-            <ListItem>
-              <Input v-model="imgLinkForHtml" class="cobyOrderSn" data-clipboard-action="copy"
-                     :data-clipboard-text="imgLinkForHtml" @click.native="copy"><span slot="prepend">HTML</span></Input>
-            </ListItem>
-            <ListItem>
-              <Input v-model="imgLinkForMD" class="cobyOrderSn" data-clipboard-action="copy"
-                     :data-clipboard-text="imgLinkForMD" @click.native="copy"><span
-                  slot="prepend">Markdown</span></Input>
-            </ListItem>
-          </List>
-        </Modal>
-
-        <Modal v-model="isAlbum" :footer-hide="true" :title="albumData.title">
-          <Form @submit.native.prevent :label-width="70" style="margin-top: 30px;">
-            <FormItem label="链接">
-              <Input v-model="albumData.url" style="width: auto;width: 100%"/>
-            </FormItem>
-            <FormItem label="密码">
-              <Input v-model="albumData.password" style="width: auto;width: 100px;"/>
-              <Button style="position: absolute;right: 30px;" size="small" type="primary" shape="circle"
-                      class="cobyOrderSn" data-clipboard-action="copy"
-                      :data-clipboard-text="'画廊链接：'+albumData.url+'提取码：'+albumData.password+' 复制这段内容后用浏览器打开，即可查看画廊哦'"
-                      @click.native="copy">复 制
-              </Button>
-            </FormItem>
-          </Form>
-          <div class="QRCodestyle" v-if="albumData.url" style="text-align: center;">
-            <vue-qr :text="albumData.url" :size="200"></vue-qr>
-          </div>
-          <div style="text-align: center;">
-            <p>对方通过扫码即可访问画廊</p>
-          </div>
-        </Modal>
-
-        <!--URL上传窗-->
-        <Modal v-model="urlUploadMsg" :footer-hide="true">
-          <br/>
-          <Form @submit.native.prevent>
-            <FormItem>
-              <Input @on-change="onGetLines" type="textarea" v-model="imgUrl" :rows="5"
-                     placeholder="图像链接请按照每行一条填写(部分非直链图像或防盗链图像可能会转存失败)"/>
-            </FormItem>
-            <p style="text-align: center;color: #d55757;" v-show="tempURLErr">您所输入的行数已经超过单次可上传的数量</p>
-            <p style="text-align: center;color: #5f5f5f;"
-               v-text="'单次批量上传 '+tempLink+'/'+this.uploadInfo.imgcount"></p>
-            <FormItem>
-              <Button :disabled="tempURLErr" type="primary" :loading="loading" icon="md-cloud-upload" long
-                      shape="circle" @click="uploadForUrl">UPLOAD
-              </Button>
-            </FormItem>
-          </Form>
-        </Modal>
-
-        <!--上传期限-->
-        <Modal v-model="termMsg" :footer-hide="true">
-          <br/>
-          <Form @submit.native.prevent>
-            <FormItem label="文件有效期">
-              <Select v-model="data.day" style="width:100px" @on-change="selectTerm">
-                <Option v-for="item in dayList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-              </Select>
-            </FormItem>
-            <p style="color: #9c9c9c;">设置期限后，上传的图像将在指定时间后被删除</p>
-          </Form>
-        </Modal>
-
       </div>
     </Card>
+
+    <Modal v-model="visible" :footer-hide="true" width="620">
+      <!--                <img :src="ViewURL" v-if="visible" style="max-height: 70vh; display: table-cell;margin: 0 auto;text-align: center;">-->
+      <Tabs>
+        <TabPane label="画廊" icon="ios-images">
+          <album-list :albumlist="albumlist" @return-data='returnData'/>
+        </TabPane>
+        <TabPane label="更多" icon="ios-filing" disabled>更多功能待开发</TabPane>
+      </Tabs>
+    </Modal>
+
+    <Modal v-model="IsImgLink" :footer-hide="true">
+      <br/>
+      <List :split="false">
+        <ListItem>
+          <Input v-model="imgLinkForUrl" class="cobyOrderSn" data-clipboard-action="copy"
+                 :data-clipboard-text="imgLinkForUrl" @click.native="copy"><span slot="prepend">U R L</span></Input>
+        </ListItem>
+        <ListItem v-if="imgLinkForBriefimgurl!=null && imgLinkForBriefimgurl!=''">
+          <Input v-model="imgLinkForBriefimgurl" class="cobyOrderSn" data-clipboard-action="copy"
+                 :data-clipboard-text="imgLinkForBriefimgurl" @click.native="copy"><span
+              slot="prepend">缩略图</span></Input>
+        </ListItem>
+        <ListItem>
+          <Input v-model="imgLinkForHtml" class="cobyOrderSn" data-clipboard-action="copy"
+                 :data-clipboard-text="imgLinkForHtml" @click.native="copy"><span slot="prepend">HTML</span></Input>
+        </ListItem>
+        <ListItem>
+          <Input v-model="imgLinkForMD" class="cobyOrderSn" data-clipboard-action="copy"
+                 :data-clipboard-text="imgLinkForMD" @click.native="copy"><span slot="prepend">Markdown</span></Input>
+        </ListItem>
+      </List>
+    </Modal>
+
+    <!--            画廊生成后显示详情界面-->
+    <Modal v-model="isAlbum" :footer-hide="true" :title="albumData.title">
+      <Form @submit.native.prevent :label-width="70" style="margin-top: 30px;">
+        <FormItem label="链接">
+          <Input v-model="albumData.url" style="width: auto;width: 100%"/>
+        </FormItem>
+        <FormItem label="密码">
+          <Input v-model="albumData.password" style="width: auto;width: 100px;"/>
+          <Button style="position: absolute;right: 30px;" size="small" type="primary" shape="circle" class="cobyOrderSn"
+                  data-clipboard-action="copy"
+                  :data-clipboard-text="'画廊链接：'+albumData.url+'提取码：'+albumData.password+' 复制这段内容后用浏览器打开，即可查看画廊哦'"
+                  @click.native="copy">复 制
+          </Button>
+        </FormItem>
+      </Form>
+      <div class="QRCodestyle" v-if="albumData.url" style="text-align: center;">
+        <vue-qr :text="albumData.url" :size="200"></vue-qr>
+      </div>
+      <div style="text-align: center;">
+        <p>对方通过扫码即可访问画廊</p>
+      </div>
+    </Modal>
+
+    <!--URL上传窗-->
+    <Modal v-model="urlUploadMsg" :footer-hide="true">
+      <br/>
+      <Form @submit.native.prevent>
+        <FormItem>
+          <Input @on-change="onGetLines" type="textarea" v-model="imgUrl" :rows="5"
+                 placeholder="图像链接请按照每行一条填写(部分非直链图像或防盗链图像可能会转存失败)"/>
+        </FormItem>
+        <p style="text-align: center;color: #d55757;" v-show="tempURLErr">您所输入的行数已经超过单次可上传的数量</p>
+        <p style="text-align: center;color: #5f5f5f;"
+           v-text="'单次批量上传 '+tempLink+'/'+this.uploadInfo.imgcount"></p>
+        <FormItem>
+          <Button :disabled="tempURLErr" type="primary" :loading="loading" icon="md-cloud-upload" long shape="circle"
+                  @click="uploadForUrl">开始转存
+          </Button>
+        </FormItem>
+      </Form>
+    </Modal>
+
+    <!--上传期限-->
+    <Modal v-model="termMsg" :footer-hide="true">
+      <br/>
+      <Form @submit.native.prevent>
+        <FormItem label="图像有效期">
+          <Select v-model="img_day" style="width:200px" @on-change="selectTerm">
+            <Option v-for="item in dayList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+          </Select>
+        </FormItem>
+        <p style="color: #9c9c9c;">设置期限后，上传的图像将在指定时间后被删除</p>
+      </Form>
+    </Modal>
+
     <Spin fix v-if="spinShow">
       <Icon type="ios-loading" size=42 style="color: #5f5f5f" class="hellohao-spin-icon-load"></Icon>
       <div style="line-height: 42px;color: #5f5f5f">批量上传中，请耐心等待</div>
     </Spin>
+
   </div>
 
 </template>
@@ -187,13 +200,89 @@
 </script>
 
 <style scoped>
+.zdy-time {
+  --animate-duration: 1.5s;
+}
+
+.zdy-time800 {
+  --animate-duration: 0.8s;
+}
+
 .ivu-upload-drag {
   background: rgba(255, 255, 255, 0);
   border: 1px dashed #dcd9d9;
 }
+
+.hellohao-spin-icon-load {
+  animation: ani-hellohao-spin 1s linear infinite;
+}
+
+@keyframes ani-hellohao-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+
 </style>
 
 <style>
+.record_css {
+  /*background: #fd6a37;*/
+  /*background-image: url("../assets/img/record_ico.svg");*/
+  /*background-size:  contain;*/
+  /*background-repeat: no-repeat;*/
+  /*background-position: 100% 100%;*/
+  height: 24px;
+  width: 100px;
+  box-shadow: 0 1px 5px 0px rgba(87, 87, 87, .55);
+  border-radius: 0 0 10px 10px;
+  position: absolute;
+  left: 50%;
+  right: 50%;
+  transform: translate(-50%, -50%);
+  top: 11px;
+  z-index: 1;
+  color: #FFF;
+  font-size: 12px;
+  text-align: center;
+  cursor: pointer;
+  line-height: 24px;
+}
+
+.url_style {
+  /*background-image: url("../assets/img/url-img.svg");*/
+  background-size: contain; /*按比例缩放*/
+  background-repeat: no-repeat; /*还有repeat-x,y等*/
+  background-position: 100% 100%;
+  height: 50px;
+  width: 50px;
+  position: absolute;
+  left: 50%;
+  right: 50%;
+  transform: translate(-50%, -50%);
+  top: 45%;
+}
+
+.progress_sty {
+  display: inline-block;
+  height: 20px;
+  width: 50px;
+  border-color: #e8eaec;
+  box-shadow: 0 2px 5px 1px rgba(124, 144, 247, .58);
+  position: relative;
+  bottom: 15px;
+  border-radius: 0 0 8px 8px;
+  cursor: pointer;
+  background: #7b90f8;
+  color: #fff;
+}
 
 .demo-upload-list {
   line-height: 28px;
@@ -243,7 +332,7 @@
 .mycard {
   max-height: 600px;
   margin: 25px auto;
-  width: 55%;
+  width: 66%;
   min-width: 40vh;
   overflow-y: auto;
 }
@@ -264,17 +353,11 @@
   border: 0;
   border-color: #e8eaec;
   box-shadow: 0 2px 5px 1px rgba(64, 60, 67, .16);
-}
-
-.demo::-webkit-scrollbar {
-  display: none; /* Chrome Safari */
-}
-
-.infotitle {
-  font-size: 16px;
+  /*box-shadow: 0 0 18px #dadada;*/
 }
 
 .myupdiv {
+  /*background-color: #FFFFFF;*/
   text-align: center;
   height: 80px;
   min-width: 65px;
@@ -291,10 +374,89 @@
 }
 
 .myupdiv:hover {
-  opacity: 0.5;
+  /*opacity: 0.5;*/
   -webkit-transition: all 0.5s ease 0s;
   -moz-transition: all 0.5s ease 0s;
   transition: all 0.5s ease 0s;
 }
 
+/**/
+.upload-img {
+  font-weight: bold;
+  -webkit-transition-property: -webkit-transform;
+  -webkit-transition-duration: 1s;
+  -moz-transition-property: -moz-transform;
+  -moz-transition-duration: 1s;
+  -webkit-animation: rotate 3s linear infinite;
+  -moz-animation: rotate 3s linear infinite;
+  -o-animation: rotate 3s linear infinite;
+  animation: rotate 3s linear infinite;
+}
+
+@-webkit-keyframes rotate {
+  from {
+    -webkit-transform: rotate(0deg)
+  }
+  to {
+    -webkit-transform: rotate(360deg)
+  }
+}
+
+@-moz-keyframes rotate {
+  from {
+    -moz-transform: rotate(0deg)
+  }
+  to {
+    -moz-transform: rotate(359deg)
+  }
+}
+
+@-o-keyframes rotate {
+  from {
+    -o-transform: rotate(0deg)
+  }
+  to {
+    -o-transform: rotate(359deg)
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg)
+  }
+  to {
+    transform: rotate(359deg)
+  }
+}
+
+.webbgimg {
+  filter: blur(10px) brightness(0.5);
+  -webkit-animation-name: slideshow--alt;
+  animation-name: slideshow--alt;
+  -webkit-animation-duration: 10s;
+  animation-duration: 10s;
+  transform: scale(1.1);
+  background-color: #f7f8fa;
+  position: fixed;
+  opacity: 0.9;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  /*transition: opacity 1s,transform .25s,filter .25s;*/
+  transition: opacity 1s;
+}
+
+.uploadInfoSty {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  height: 110px;
+  width: 100%;
+  text-align: center;
+  line-height: 26px;
+  margin-top: 60px;
+}
 </style>
diff --git a/src/views/upload.vue.bak b/src/views/upload.vue.bak
new file mode 100644
index 0000000..3b03ccd
--- /dev/null
+++ b/src/views/upload.vue.bak
@@ -0,0 +1,300 @@
+<template>
+  <div>
+    <div class="mycard  animate__delay-0.8s">
+      <Row class="animate__animated animate__delay-0.8s animate__fadeInDown" style="overflow: hidden;">
+        <Col flex="1" style="padding: 8px;">
+          <Card class="cardShadow"
+                :class="{'Hollowed':true}"
+                @mouseover="mouseOver"
+                @mouseleave="mouseLeave"
+                style="background: #FFF;margin-top: 10px;padding-left: 8px; padding-right: 8px;cursor:pointer;"
+                @click.native="showUrlUploadMsg">
+            <div class="myupdiv">
+              <img :src="linkImg" referrerpolicy="no-referrer" style="width: 45px;" class="toolImg"/>
+              <p style="font-size: 18px;margin-top: 5px;line-height: 32px; font-size: 1.0vh;color: #808794;text-align: right;">
+                图片链接转存
+              </p>
+            </div>
+          </Card>
+        </Col>
+        <Col flex="1" style="padding: 8px;">
+          <Card class="cardShadow"
+                :class="{'Hollowed':false}"
+                @mouseover="mouseOver"
+                @mouseleave="mouseLeave"
+                style="margin-top: 10px;padding-left: 8px; padding-right: 8px;cursor:pointer;"
+                @click.native="showtermMsg">
+            <div class="myupdiv">
+              <img :src="timeImg" class="toolImg"/>
+              <p style="font-size: 18px;margin-top: 5px;line-height: 32px ;text-align: right;font-size: 1.0vh;color: #808794;">
+                存储期限:
+                <span v-if="data.day==0">永久</span>
+                <span v-else>{{ data.day }}天</span>
+              </p>
+            </div>
+          </Card>
+        </Col>
+      </Row>
+    </div>
+
+    <Card id="box" class="mycard upcard img_list_box animate__animated  animate__delay-0.8s animate__fadeInUp"
+          :class="{'Hollowed':false,'testback':true}">
+      <div class="img_list_arr" style="text-align:center;">
+        <div class="demo-upload-list animate__animated animate__delay-1.5s  animate__fadeIn"
+             v-for="(item,index) in uploadList" v-bind:key="item.uid">
+          <template v-if="item.status === 'finished'">
+            <img style="cursor:pointer;" preview="2" :data-pswp-uid="index" :preview-text="item.name"
+                 :src="item.response.data.url"/>
+            <div class="demo-upload-list-cover">
+              <Icon type="md-checkmark-circle" style="margin: 0 5px;"
+                    :style="{color:(selectIndexUid.indexOf(item.uid)>=0?'#43b984':'#c7c7c7')}"
+                    @click.native="clickImg(item.response.data.imguid,item.uid)" title="选择"></Icon>
+              <Icon type="md-trash" style="margin: 0 5px;" @click.native="handleRemove(item)" title="删除图像"></Icon>
+              <Icon type="md-git-branch" style="margin: 0 5px;" @click.native="getImgLink(item)"
+                    title="分享链接"></Icon>
+            </div>
+          </template>
+          <template v-else>
+            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
+          </template>
+        </div>
+        <Upload
+            ref="upload"
+            :paste="true"
+            :disabled="getUploadSwitch"
+            :show-upload-list="false"
+            :default-file-list="defaultList"
+            :format="uploadInfo.suffix"
+            :max-size="uploadInfo.filesize"
+            :on-success="handleSuccess"
+            :on-format-error="handleFormatError"
+            :on-exceeded-size="handleMaxSize"
+            :before-upload="handleBeforeUpload"
+            :on-error="uploadError"
+            :multiple="true"
+            :data="data"
+            :headers="headers"
+            :action="this.$http.defaults.baseURL+'/upload'"
+            type="drag"
+            style="display:contents;width:120px;">
+          <div style="width: 100%;height:118px;">
+            <div
+                style="width: 98px;height: 64px;margin: 0px auto;text-align: center;position: absolute;left: 0;right: 0;top: 30px;"
+                v-show="!getUploadSwitch">
+              <Icon type="ios-camera" size="36"></Icon>
+              <p style="text-align: center;color: #515a6e;font-size: xx-small;">拖拽图像到此处</p>
+            </div>
+            <div style="height: 64px;margin: 0px auto;text-align: center;position: absolute;left: 0;right: 0;top: 30px;"
+                 v-show="getUploadSwitch">
+              <p style="text-align: center;color: #515a6e;font-size: x-small;">{{ this.uploadInfo.uploadInfo }}</p>
+            </div>
+          </div>
+        </Upload>
+        <Modal v-model="visible" :footer-hide="true" width="620" :styles="{top: '20px'}">
+          <Tabs>
+            <TabPane label="画廊" icon="ios-images">
+              <album-list :albumlist="albumlist" @return-data='returnData'/>
+            </TabPane>
+            <TabPane label="更多" icon="ios-filing" disabled>更多功能待开发</TabPane>
+          </Tabs>
+        </Modal>
+
+        <Modal v-model="IsImgLink" :footer-hide="true">
+          <br/>
+          <List :split="false">
+            <ListItem>
+              <Input v-model="imgLinkForUrl" class="cobyOrderSn" data-clipboard-action="copy"
+                     :data-clipboard-text="imgLinkForUrl" @click.native="copy"><span slot="prepend">U R L</span></Input>
+            </ListItem>
+            <ListItem>
+              <Input v-model="imgLinkForHtml" class="cobyOrderSn" data-clipboard-action="copy"
+                     :data-clipboard-text="imgLinkForHtml" @click.native="copy"><span slot="prepend">HTML</span></Input>
+            </ListItem>
+            <ListItem>
+              <Input v-model="imgLinkForMD" class="cobyOrderSn" data-clipboard-action="copy"
+                     :data-clipboard-text="imgLinkForMD" @click.native="copy"><span
+                  slot="prepend">Markdown</span></Input>
+            </ListItem>
+          </List>
+        </Modal>
+
+        <Modal v-model="isAlbum" :footer-hide="true" :title="albumData.title">
+          <Form @submit.native.prevent :label-width="70" style="margin-top: 30px;">
+            <FormItem label="链接">
+              <Input v-model="albumData.url" style="width: auto;width: 100%"/>
+            </FormItem>
+            <FormItem label="密码">
+              <Input v-model="albumData.password" style="width: auto;width: 100px;"/>
+              <Button style="position: absolute;right: 30px;" size="small" type="primary" shape="circle"
+                      class="cobyOrderSn" data-clipboard-action="copy"
+                      :data-clipboard-text="'画廊链接：'+albumData.url+'提取码：'+albumData.password+' 复制这段内容后用浏览器打开，即可查看画廊哦'"
+                      @click.native="copy">复 制
+              </Button>
+            </FormItem>
+          </Form>
+          <div class="QRCodestyle" v-if="albumData.url" style="text-align: center;">
+            <vue-qr :text="albumData.url" :size="200"></vue-qr>
+          </div>
+          <div style="text-align: center;">
+            <p>对方通过扫码即可访问画廊</p>
+          </div>
+        </Modal>
+
+        <!--URL上传窗-->
+        <Modal v-model="urlUploadMsg" :footer-hide="true">
+          <br/>
+          <Form @submit.native.prevent>
+            <FormItem>
+              <Input @on-change="onGetLines" type="textarea" v-model="imgUrl" :rows="5"
+                     placeholder="图像链接请按照每行一条填写(部分非直链图像或防盗链图像可能会转存失败)"/>
+            </FormItem>
+            <p style="text-align: center;color: #d55757;" v-show="tempURLErr">您所输入的行数已经超过单次可上传的数量</p>
+            <p style="text-align: center;color: #5f5f5f;"
+               v-text="'单次批量上传 '+tempLink+'/'+this.uploadInfo.imgcount"></p>
+            <FormItem>
+              <Button :disabled="tempURLErr" type="primary" :loading="loading" icon="md-cloud-upload" long
+                      shape="circle" @click="uploadForUrl">UPLOAD
+              </Button>
+            </FormItem>
+          </Form>
+        </Modal>
+
+        <!--上传期限-->
+        <Modal v-model="termMsg" :footer-hide="true">
+          <br/>
+          <Form @submit.native.prevent>
+            <FormItem label="文件有效期">
+              <Select v-model="data.day" style="width:100px" @on-change="selectTerm">
+                <Option v-for="item in dayList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+              </Select>
+            </FormItem>
+            <p style="color: #9c9c9c;">设置期限后，上传的图像将在指定时间后被删除</p>
+          </Form>
+        </Modal>
+
+      </div>
+    </Card>
+    <Spin fix v-if="spinShow">
+      <Icon type="ios-loading" size=42 style="color: #5f5f5f" class="hellohao-spin-icon-load"></Icon>
+      <div style="line-height: 42px;color: #5f5f5f">批量上传中，请耐心等待</div>
+    </Spin>
+  </div>
+
+</template>
+
+<script src="../assets/js/upload.js">
+
+</script>
+
+<style scoped>
+.ivu-upload-drag {
+  background: rgba(255, 255, 255, 0);
+  border: 1px dashed #dcd9d9;
+}
+</style>
+
+<style>
+
+.demo-upload-list {
+  line-height: 28px;
+  width: 120px;
+  height: 120px;
+  box-shadow: 0 2px 9px 0 rgba(0, 0, 0, .1);
+  background-image: linear-gradient(147deg, #fffcf9, #cde8f6);
+}
+
+.demo-upload-list-cover {
+  display: block;
+  background: rgba(0, 0, 0, .5);
+  height: 25px;
+}
+
+.select-img-list {
+  position: absolute;
+  top: 92px;
+  width: 65px;
+  height: 30px;
+  transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  left: 73px;
+  background: #57a3f3;
+}
+
+.select-img-icon {
+  position: absolute;
+  top: 4px;
+  left: 26px;
+  color: #FFF;
+  transform: rotate(37deg);
+  -ms-transform: rotate(37deg);
+  font-weight: 600;
+  font-size: large;
+}
+
+.demo-upload-list-cover i {
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 18px;
+}
+
+.demo-upload-list-cover i:hover {
+  color: #fff;
+}
+
+.mycard {
+  max-height: 600px;
+  margin: 25px auto;
+  width: 55%;
+  min-width: 40vh;
+  overflow-y: auto;
+}
+
+.ivu-modal-header p, .ivu-modal-header-inner {
+  width: 85%;
+  font-size: xx-small;
+
+}
+
+.ivu-avatar {
+  width: 42px;
+  height: 42px;
+  border-radius: 5px;
+}
+
+.ivu-card-bordered {
+  border: 0;
+  border-color: #e8eaec;
+  box-shadow: 0 2px 5px 1px rgba(64, 60, 67, .16);
+}
+
+.demo::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
+
+.infotitle {
+  font-size: 16px;
+}
+
+.myupdiv {
+  text-align: center;
+  height: 80px;
+  min-width: 65px;
+  -webkit-transition: all 0.5s ease 0s;
+  -moz-transition: all 0.5s ease 0s;
+  transition: all 0.5s ease 0s;
+}
+
+.toolImg {
+  width: 50px;
+  -webkit-transition: all 0.5s ease 0s;
+  -moz-transition: all 0.5s ease 0s;
+  transition: all 0.5s ease 0s;
+}
+
+.myupdiv:hover {
+  opacity: 0.5;
+  -webkit-transition: all 0.5s ease 0s;
+  -moz-transition: all 0.5s ease 0s;
+  transition: all 0.5s ease 0s;
+}
+
+</style>