| 1 |
- {"remainingRequest":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/vue-loader/lib/index.js??vue-loader-options!/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/src/components/uploadImage.vue?vue&type=style&index=0&lang=css&","dependencies":[{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/src/components/uploadImage.vue","mtime":1616483432000},{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/postcss-loader/src/index.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgouZmluaXNoX3Jvb20gewogICAgLyp3aWR0aDogMTQwcHg7Ki8KICAgIC8qaGVpZ2h0OiAxNjVweDsqLwp9CgppbWcgewogICAgaGVpZ2h0OiAxMDAlOwp9CgouZmluaXNoX3Jvb20yIHsKICAgIHdpZHRoOiAxMDAlOwogICAgaGVpZ2h0OiAxMDAlOwogICAgZGlzcGxheTogZmxleDsKICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgICBmbGV4LWZsb3c6IHdyYXA7Cn0KCi5maW5pc2hfcm9vbTIgPiBkaXYgewogICAgZGlzcGxheTogZmxleDsKICAgIGZsZXgtd3JhcDogd3JhcDsKfQoKCi5maW5pc2hfcm9vbTIgLm1hcmdlSW1nIHsKICAgIG1hcmdpbi1sZWZ0OiAxMHB4Owp9CgouZmluaXNoX3Jvb20yIC5yb29tX2ltZyB7CiAgICB3aWR0aDogMTAwcHg7CiAgICBoZWlnaHQ6IDEwMHB4OwogICAgY3Vyc29yOiBwb2ludGVyOwogICAgb3ZlcmZsb3c6IGhpZGRlbjsKICAgIHBvc2l0aW9uOiByZWxhdGl2ZTsKICAgIHRleHQtYWxpZ246IGNlbnRlcjsKICAgIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMCwgMCwgMCwgLjUpOwogICAgbWFyZ2luLWxlZnQ6IDEwcHg7CiAgICBtYXJnaW4tdG9wOiAxMHB4Owp9CgouZmluaXNoX3Jvb20yIC5yb29tX2ltZzpiZWZvcmUgewogICAgLypjb250ZW50OiAiIjsqLwogICAgLyp3aWR0aDogMDsqLwogICAgLypoZWlnaHQ6IDEwMCU7Ki8KICAgIC8qISpiYWNrZ3JvdW5kOiAjMDAwOyohKi8KICAgIC8qcGFkZGluZzogMTRweCAxOHB4OyovCiAgICAvKnBvc2l0aW9uOiBhYnNvbHV0ZTsqLwogICAgLyp0b3A6IDA7Ki8KICAgIC8qbGVmdDogNTAlOyovCiAgICAvKm9wYWNpdHk6IDA7Ki8KfQoKLmZpbmlzaF9yb29tMiAucm9vbV9pbWc6aG92ZXI6YmVmb3JlIHsKICAgIHdpZHRoOiAxMDAlOwogICAgbGVmdDogMDsKICAgIG9wYWNpdHk6IDAuNTsKfQoKLmZpbmlzaF9yb29tMiAucm9vbV9pbWcgLmJveC1jb250ZW50IHsKICAgIHdpZHRoOiAxMDAlOwogICAgcGFkZGluZzogMTRweCAxOHB4OwogICAgY29sb3I6ICNmZmY7CiAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICB0b3A6IDM4JTsKICAgIGxlZnQ6IDA7Cn0KCi5maW5pc2hfcm9vbTIgLnJvb21faW1nIC5pY29uIHsKICAgIHBhZGRpbmc6IDA7CiAgICBtYXJnaW46IDA7CiAgICBsaXN0LXN0eWxlOiBub25lOwogICAgbWFyZ2luLXRvcDogLTIwcHg7Cn0KCi5maW5pc2hfcm9vbTIgLnJvb21faW1nIC5pY29uIGxpIHsKICAgIGRpc3BsYXk6IGlubGluZS1ibG9jazsKfQoKLmZpbmlzaF9yb29tMiAucm9vbV9pbWcgLmljb24gbGkgaSB7CiAgICBkaXNwbGF5OiBibG9jazsKICAgIHdpZHRoOiA0MHB4OwogICAgaGVpZ2h0OiA0MHB4OwogICAgbGluZS1oZWlnaHQ6IDQwcHg7CiAgICBib3JkZXItcmFkaXVzOiA1MCU7CiAgICBmb250LXNpemU6IDIwcHg7CiAgICBmb250LXdlaWdodDogNzAwOwogICAgY29sb3I6ICNmZmY7CiAgICBtYXJnaW4tcmlnaHQ6IDI1cHg7CiAgICBvcGFjaXR5OiAwOwogICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDUwcHgpOwogICAgdHJhbnNpdGlvbjogYWxsIDAuNXMgZWFzZSAwczsKfQoKCkBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1heC13aWR0aDogOTkwcHgpIHsKICAgIC5maW5pc2hfcm9vbTIgLnJvb21faW1nIHsKICAgIH0KfQoKLmZpbmlzaF9yb29tMiAuZGVsZXRlSW1nIHsKICAgIGNvbG9yOiByZWQ7CiAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICB0b3A6IDBweDsKICAgIGxlZnQ6IDgwcHg7CiAgICBjdXJzb3I6IHBvaW50ZXI7Cn0KCi5maW5pc2hfcm9vbTIgLnJvb21faW1nIGltZyB7CiAgICBjdXJzb3I6IHBvaW50ZXI7CiAgICB3aWR0aDogMTAwcHg7CiAgICBoZWlnaHQ6IDEwMHB4Owp9CgouZmluaXNoX3Jvb20yID4gLnJvb21faW1nIHNwYW4gewogICAgcG9zaXRpb246IGFic29sdXRlOwogICAgd2lkdGg6IGF1dG87CiAgICBoZWlnaHQ6IGF1dG87CiAgICByaWdodDogNXB4OwogICAgYm90dG9tOiAzcHg7Cn0KCi5maW5pc2hfcm9vbTIgLmltLWJ1dHRvbiB7CiAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICB0b3A6IC0xNHB4OwogICAgcmlnaHQ6IC0xOHB4OwogICAgd2lkdGg6IDQwcHg7CiAgICBoZWlnaHQ6IDQwcHg7CiAgICBjdXJzb3I6IHBvaW50ZXI7CiAgICBib3JkZXItcmFkaXVzOiA1MCU7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDAsIDAsIDAsIC41KTsKICAgIG9wYWNpdHk6IDA7Cn0KCi5maW5pc2hfcm9vbTIgLnJvb21faW1nOmhvdmVyIC5pY29uIGxpIGkgewogICAgb3BhY2l0eTogMC41Owp9CgouZmluaXNoX3Jvb20yIC5yb29tX2ltZzpob3ZlciBpbWcgewogICAgb3BhY2l0eTogMC41Owp9CgoKLmZpbmlzaF9yb29tMiAucm9vbV9pbWc6aG92ZXIgLmltLWJ1dHRvbiB7CiAgICBvcGFjaXR5OiAxOwp9CgouZmluaXNoX3Jvb20yIC5pbS1jbG9zZSB7CiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgtNDVkZWcpOwogICAgbGluZS1oZWlnaHQ6IDBweDsKICAgIGxlZnQ6IDZweDsKICAgIGJvdHRvbTogMTNweDsKICAgIGRpc3BsYXk6IGlubGluZS1ibG9jazsKICAgIHdpZHRoOiAxNXB4OwogICAgaGVpZ2h0OiAycHg7CiAgICBiYWNrZ3JvdW5kOiAjZmZmOwogICAgcG9zaXRpb246IGFic29sdXRlOwp9CgouZmluaXNoX3Jvb20yIC5pbS1jbG9zZTEgewogICAgbGVmdDogNXB4OwogICAgYm90dG9tOiAxM3B4OwogICAgZGlzcGxheTogaW5saW5lLWJsb2NrOwogICAgd2lkdGg6IDE1cHg7CiAgICBoZWlnaHQ6IDJweDsKICAgIGJhY2tncm91bmQ6ICNmZmY7CiAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICB0cmFuc2Zvcm06IHJvdGF0ZSg0NWRlZyk7Cn0KCi5yb29tX2FkZF9pbWcgewogICAgbWFyZ2luLWxlZnQ6IDEwcHg7CiAgICBtYXJnaW4tdG9wOiAxMHB4OwogICAgd2lkdGg6IDEwMHB4OwogICAgaGVpZ2h0OiAxMDBweDsKICAgIGN1cnNvcjogcG9pbnRlcjsKICAgIGJvcmRlcjogMXB4IHNvbGlkICNlMWUxZTE7CiAgICBkaXNwbGF5OiBmbGV4OwogICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47CiAgICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgICB6LWluZGV4OiAxMDsKfQoKLnJvb21fYWRkX2ltZyA+IHNwYW46bnRoLWNoaWxkKDEpIHsKICAgIHdpZHRoOiAzMHB4OwogICAgaGVpZ2h0OiAzMHB4OwogICAgb3ZlcmZsb3c6IGhpZGRlbjsKfQoKLnJvb21fYWRkX2ltZyA+IHNwYW46bnRoLWNoaWxkKDIpIHsKICAgIG1hcmdpbi1ib3R0b206IDEwcHg7Cn0KCi5yb29tX2FkZF9pbWcgaW5wdXQgewogICAgY3Vyc29yOiBwb2ludGVyOwogICAgcG9zaXRpb246IGFic29sdXRlOwogICAgdG9wOiAwcHg7CiAgICBsZWZ0OiAwcHg7CiAgICB3aWR0aDogMTAwJTsKICAgIGhlaWdodDogMTAwJTsKICAgIHotaW5kZXg6IDk5OTk5OwogICAgb3BhY2l0eTogMDsKfQo="},{"version":3,"sources":["uploadImage.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6KA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;AAGA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"uploadImage.vue","sourceRoot":"src/components","sourcesContent":["<template ref=\"uploadImage\">\n <div class='finish_room'>\n <div class='finish_room2'>\n <viewer :images=\"photo\">\n <div :key=\"index\" v-for=\"(item,index) in photo\" class='room_img'>\n <img v-lazy=\"item.url\">\n <div v-if=\"!disabled\" @click=\"deleteImg(index)\" class=\"im-button\">\n <div class=\"im-close\"></div>\n <div class=\"im-close1\"></div>\n </div>\n </div>\n </viewer>\n <div v-if=\"photo.length<limit\" v-loading=\"loading\" class='room_add_img'>\n <span style=\"margin-top: 35px\"><img src=\"../assets/add_img.png\"></span>\n <input :disabled=\"disabled\" @change='add_img' type=\"file\">\n </div>\n </div>\n </div>\n\n</template>\n\n<script>\n import axios from 'axios'\n export default {\n props: {\n limit: {\n type: Number,\n default() {\n return 1;\n }\n },\n disabled: {\n type: Boolean,\n default() {\n return false;\n }\n },\n isCompress: {\n type: Boolean,\n default() {\n return false;\n }\n },\n value:{}\n },\n data: function () {\n return {\n photo: [],\n loading: false,\n }\n },\n watch: {\n photo() {\n if (this.limit == 1) {\n this.$emit('input', this.photo.length>0?this.photo[0].url:'')\n } else {\n this.$emit('input', this.photo)\n }\n },\n value() {\n if (this.limit == 1) {\n if(this.value instanceof Array){\n this.photo = []\n }else{\n this.photo = this.value?[{url:this.value}]:[]\n }\n } else {\n this.photo = this.value\n }\n }\n },\n mounted() {\n if (this.limit == 1) {\n if(this.value instanceof Array){\n this.photo = []\n }else{\n this.photo = this.value?[this.value]:[]\n }\n } else {\n this.photo = this.value\n }\n },\n methods: {\n deleteImg(index) {\n this.photo.splice(index, 1)\n },\n compress(img) {\n var url = null;\n var canvas = document.createElement(\"canvas\");\n var scale = img.height / img.width;\n canvas.width = 720;\n canvas.height = 720 * scale;\n\n\n var ctx = canvas.getContext(\"2d\");\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\n url = canvas.toDataURL(\"image/jpeg\");\n return url;\n\n },\n dataURItoBlob(dataURI) {\n let byteString = window.atob(dataURI.split(',')[1])\n let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]\n let ab = new ArrayBuffer(byteString.length)\n let ia = new Uint8Array(ab)\n for (let i = 0; i < byteString.length; i++) {\n ia[i] = byteString.charCodeAt(i)\n }\n return new window.Blob([ab], {type: mimeString})\n },\n add_img(event) {\n let file = event.target.files[0]\n if (/\\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(event.target.value)) {\n let MAXSIZE = 10*1024 * 1024;\n let size = file.size;\n if(size>MAXSIZE){\n event.target.value = ''\n this.$notify.error({\n title: '上传图片错误',\n message: '上传图片不能超过10M'\n })\n return\n }\n this.loading = true\n let reader = new FileReader()\n let self = this\n reader.readAsDataURL(file)\n let img = new Image;\n reader.onload = function (e) {\n img.src = this.result;\n img.onload = function () {\n let base = e.target.result\n let fileItem = file\n if (self.isCompress) {\n base = self.compress(img)\n fileItem = self.dataURItoBlob(base)\n }\n let formdata = new window.FormData()\n formdata.append('file', fileItem)\n axios({\n method: \"POST\",\n url: '/upload/uploadImage',\n data: formdata,\n timeout: 1000000,\n headers: {\n 'Content-Type': 'multipart/form-data'\n }\n }).then(res => {\n event.target.value = ''\n self.photo.push({fileName:file.fileName,url:res.data.data})\n self.loading = false\n }).catch(e => {\n event.target.value = ''\n self.loading = false\n console.log(e.message)\n // this.$message.error(e.message);\n })\n }\n }\n } else {\n event.target.value = ''\n this.$notify.error({\n title: '上传图片错误',\n message: '请上传gif|jpg|jpeg|png|GIF|JPG|PNG格式图片'\n })\n }\n }\n }\n }\n</script>\n<style>\n .finish_room {\n /*width: 140px;*/\n /*height: 165px;*/\n }\n\n img {\n height: 100%;\n }\n\n .finish_room2 {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n flex-flow: wrap;\n }\n\n .finish_room2 > div {\n display: flex;\n flex-wrap: wrap;\n }\n\n\n .finish_room2 .margeImg {\n margin-left: 10px;\n }\n\n .finish_room2 .room_img {\n width: 100px;\n height: 100px;\n cursor: pointer;\n overflow: hidden;\n position: relative;\n text-align: center;\n background-color: rgba(0, 0, 0, .5);\n margin-left: 10px;\n margin-top: 10px;\n }\n\n .finish_room2 .room_img:before {\n /*content: \"\";*/\n /*width: 0;*/\n /*height: 100%;*/\n /*!*background: #000;*!*/\n /*padding: 14px 18px;*/\n /*position: absolute;*/\n /*top: 0;*/\n /*left: 50%;*/\n /*opacity: 0;*/\n }\n\n .finish_room2 .room_img:hover:before {\n width: 100%;\n left: 0;\n opacity: 0.5;\n }\n\n .finish_room2 .room_img .box-content {\n width: 100%;\n padding: 14px 18px;\n color: #fff;\n position: absolute;\n top: 38%;\n left: 0;\n }\n\n .finish_room2 .room_img .icon {\n padding: 0;\n margin: 0;\n list-style: none;\n margin-top: -20px;\n }\n\n .finish_room2 .room_img .icon li {\n display: inline-block;\n }\n\n .finish_room2 .room_img .icon li i {\n display: block;\n width: 40px;\n height: 40px;\n line-height: 40px;\n border-radius: 50%;\n font-size: 20px;\n font-weight: 700;\n color: #fff;\n margin-right: 25px;\n opacity: 0;\n transform: translateY(50px);\n transition: all 0.5s ease 0s;\n }\n\n\n @media only screen and (max-width: 990px) {\n .finish_room2 .room_img {\n }\n }\n\n .finish_room2 .deleteImg {\n color: red;\n position: absolute;\n top: 0px;\n left: 80px;\n cursor: pointer;\n }\n\n .finish_room2 .room_img img {\n cursor: pointer;\n width: 100px;\n height: 100px;\n }\n\n .finish_room2 > .room_img span {\n position: absolute;\n width: auto;\n height: auto;\n right: 5px;\n bottom: 3px;\n }\n\n .finish_room2 .im-button {\n position: absolute;\n top: -14px;\n right: -18px;\n width: 40px;\n height: 40px;\n cursor: pointer;\n border-radius: 50%;\n background-color: rgba(0, 0, 0, .5);\n opacity: 0;\n }\n\n .finish_room2 .room_img:hover .icon li i {\n opacity: 0.5;\n }\n\n .finish_room2 .room_img:hover img {\n opacity: 0.5;\n }\n\n\n .finish_room2 .room_img:hover .im-button {\n opacity: 1;\n }\n\n .finish_room2 .im-close {\n transform: rotate(-45deg);\n line-height: 0px;\n left: 6px;\n bottom: 13px;\n display: inline-block;\n width: 15px;\n height: 2px;\n background: #fff;\n position: absolute;\n }\n\n .finish_room2 .im-close1 {\n left: 5px;\n bottom: 13px;\n display: inline-block;\n width: 15px;\n height: 2px;\n background: #fff;\n position: absolute;\n transform: rotate(45deg);\n }\n\n .room_add_img {\n margin-left: 10px;\n margin-top: 10px;\n width: 100px;\n height: 100px;\n cursor: pointer;\n border: 1px solid #e1e1e1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n position: relative;\n z-index: 10;\n }\n\n .room_add_img > span:nth-child(1) {\n width: 30px;\n height: 30px;\n overflow: hidden;\n }\n\n .room_add_img > span:nth-child(2) {\n margin-bottom: 10px;\n }\n\n .room_add_img input {\n cursor: pointer;\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n z-index: 99999;\n opacity: 0;\n }\n</style>\n"]}]}
|
