| 1 |
- {"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\pages\\app\\upload\\index.vue?vue&type=style&index=0&id=3ffc8814&lang=scss&scoped=true","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\pages\\app\\upload\\index.vue","mtime":1761614939006},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\css-loader\\index.js","mtime":1761614929364},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1761614937403},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\postcss-loader\\src\\index.js","mtime":1761614935133},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":1761614936391},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js","mtime":1761614937402}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQoudXBsb2FkLWJ0biB7DQogIGRpc3BsYXk6IGZsZXg7DQogIGFsaWduLWl0ZW1zOiBjZW50ZXI7DQp9DQouaW1nLWxpc3Qgew0KICBwYWRkaW5nOiAxMHB4Ow0KICBvdmVyZmxvdzogc2Nyb2xsOw0KICBoZWlnaHQ6IGNhbGMoMTAwdmggLSA1MHB4KTsNCiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjsNCn0NCg0KOjp2LWRlZXAgLmVsLXVwbG9hZC1saXN0LS1waWN0dXJlLWNhcmQgLmVsLXVwbG9hZC1saXN0X19pdGVtIHsNCiAgLy8gd2lkdGg6IDExM3B4Ow0KICAvLyBoZWlnaHQ6IDExM3B4Ow0KICAvLyBsaW5lLWhlaWdodDogMTEzcHg7DQogIC8vIG92ZXJmbG93OiBpbmhlcml0Ow0KICBtYXJnaW46IDElIDElIDBweCAxJTsNCiAgd2lkdGg6IDMxLjMlOw0KICBoZWlnaHQ6IDMxLjMlOw0KICBwYWRkaW5nLXRvcDogMzEuMyU7DQogIGFzcGVjdC1yYXRpbzogMSAvIDE7DQp9DQo6OnYtZGVlcCAuZWwtdXBsb2FkLWxpc3QtLXBpY3R1cmUtY2FyZCAuZWwtdXBsb2FkLWxpc3RfX2l0ZW0gPiBkaXYgew0KICAvLyBwb3NpdGlvbjogcmVsYXRpdmU7DQogIHdpZHRoOiAxMDAlOw0KICBoZWlnaHQ6IDEwMCU7DQp9DQo6OnYtZGVlcCAuZWwtdXBsb2FkLS1waWN0dXJlLWNhcmQgew0KICB3aWR0aDogMTAwJTsNCiAgaGVpZ2h0OiAxMDAlOw0KICBkaXNwbGF5OiBmbGV4Ow0KICBoZWlnaHQ6IDE0NnB4Ow0KICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsNCiAgYWxpZ24taXRlbXM6IGNlbnRlcjsNCiAgYmFja2dyb3VuZDogI2Y5ZjlmOTsNCn0NCjo6di1kZWVwIC5lbC11cGxvYWQtbGlzdC0tcGljdHVyZS1jYXJkIC5lbC11cGxvYWQtbGlzdF9faXRlbSBpbWcgew0KICB3aWR0aDogMTAwJTsNCiAgaGVpZ2h0OiAxMDAlOw0KICBib3JkZXItcmFkaXVzOiA2cHg7DQogIG9iamVjdC1maXQ6IGNvdmVyOw0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIGxlZnQ6IDA7DQogIHRvcDogMDsNCn0NCi5idG5kZWwgew0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIHotaW5kZXg6IDE7DQogIGZvbnQtc2l6ZTogMThweDsNCiAgcmlnaHQ6IC0xcHg7DQogIHRvcDogLTFweDsNCiAgY29sb3I6ICMyODI4Mjg7DQogIG9wYWNpdHk6IDAuNTsNCn0NCjo6di1kZWVwIC5lbC11cGxvYWQtLXBpY3R1cmUtY2FyZDpob3ZlciwNCi5lbC11cGxvYWQ6Zm9jdXMgew0KICBib3JkZXItY29sb3I6ICNjMGNjZGE7DQp9DQouaW1nLWJveCB7DQogIGRpc3BsYXk6IGZsZXg7DQogIHBhZGRpbmctbGVmdDogMTAwcHg7DQogIGZsZXgtd3JhcDogd3JhcDsNCn0NCi5ub25lLWNhcmQgOjp2LWRlZXAgLmVsLXVwbG9hZC0tcGljdHVyZS1jYXJkIHsNCiAgZGlzcGxheTogbm9uZSAhaW1wb3J0YW50Ow0KfQ0KLmZvb3RlciB7DQogIHBhZGRpbmc6IDAgMTBweCAwIDE1cHg7DQogIHBvc2l0aW9uOiBmaXhlZDsNCiAgYm90dG9tOiAwOw0KICB3aWR0aDogMTAwJTsNCiAgYm94LXNpemluZzogYm9yZGVyLWJveDsNCiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjg1KTsNCiAgYmFja2Ryb3AtZmlsdGVyOiBibHVyKDEwcHgpOw0KICB6LWluZGV4OiAyNzc7DQogIGJvcmRlci10b3A6IDFweCBzb2xpZCAjZjBmMGYwOw0KICBoZWlnaHQ6IDUwcHg7DQogIGRpc3BsYXk6IGZsZXg7DQogIGFsaWduLWl0ZW1zOiBjZW50ZXI7DQogIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjsNCiAgLmJ0biB7DQogICAgYm9yZGVyOiAxcHggc29saWQgI2NjY2NjYzsNCiAgICB3aWR0aDogODhweDsNCiAgICBoZWlnaHQ6IDMwcHg7DQogICAgYm9yZGVyLXJhZGl1czogMTVweDsNCiAgICBjb2xvcjogIzAwMDsNCiAgICBmb250LXNpemU6IDE0cHg7DQogICAgZm9udC1mYW1pbHk6IFBpbmdGYW5nIFNDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDOw0KICAgIGZvbnQtd2VpZ2h0OiA0MDA7DQogICAgY29sb3I6ICM2NjY2NjY7DQogICAgZGlzcGxheTogZmxleDsNCiAgICBhbGlnbi1pdGVtczogY2VudGVyOw0KICAgIGp1c3RpZnktY29udGVudDogY2VudGVyOw0KICB9DQogIC51cGxvYWQgew0KICAgIGJhY2tncm91bmQtY29sb3I6ICNlOTMzMjM7DQogICAgY29sb3I6ICNmZmY7DQogICAgbWFyZ2luLWxlZnQ6IDEwcHg7DQogIH0NCiAgLnVwbG9hZC5uby1waWMgew0KICAgIGJhY2tncm91bmQ6ICNlOTMzMjM7DQogICAgb3BhY2l0eTogMC4zOw0KICB9DQp9DQoudXBsb2FkLWNhcmQgew0KICBkaXNwbGF5OiBmbGV4Ow0KICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOw0KICBsaW5lLWhlaWdodDogMTZweDsNCiAgLmVsLWljb24tcGx1cyB7DQogICAgZm9udC1zaXplOiAyOHB4Ow0KICAgIGZvbnQtd2VpZ2h0OiBib2xkOw0KICAgIGNvbG9yOiAjYmJiYmJiOw0KICB9DQogIC50ZXh0IHsNCiAgICBmb250LXNpemU6IDEzcHg7DQogICAgZm9udC13ZWlnaHQ6IDQwMDsNCiAgICBjb2xvcjogIzk5OTk5OTsNCiAgICBtYXJnaW4tdG9wOiAxOHB4Ow0KICB9DQp9DQoudXBsb2FkLXN1Y2Nlc3Mgew0KICBkaXNwbGF5OiBmbGV4Ow0KICBhbGlnbi1pdGVtczogY2VudGVyOw0KICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsNCiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsNCiAgaGVpZ2h0OiA4MHZoOw0KICAuc3VjY2VzcyB7DQogICAgd2lkdGg6IDUwcHg7DQogICAgaGVpZ2h0OiA1MHB4Ow0KICAgIGJhY2tncm91bmQ6ICM0YmJjMTI7DQogICAgYm9yZGVyLXJhZGl1czogNTAlOw0KICAgIGRpc3BsYXk6IGZsZXg7DQogICAgYWxpZ24taXRlbXM6IGNlbnRlcjsNCiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsNCiAgICBtYXJnaW4tYm90dG9tOiAyMHB4Ow0KICAgIC5pbWFnZSB7DQogICAgICB3aWR0aDogNjAlOw0KICAgIH0NCiAgfQ0KICAudGV4dCB7DQogICAgZm9udC1zaXplOiAxNnB4Ow0KICAgIGZvbnQtZmFtaWx5OiBQaW5nRmFuZyBTQy1NZWRpdW0sIFBpbmdGYW5nIFNDOw0KICAgIGZvbnQtd2VpZ2h0OiA1MDA7DQogICAgY29sb3I6ICMyODI4Mjg7DQogICAgbWFyZ2luLWJvdHRvbTogNDBweDsNCiAgfQ0KICAuYWdhaW4gew0KICAgIHdpZHRoOiAxNTBweDsNCiAgICBoZWlnaHQ6IDQzcHg7DQogICAgYm9yZGVyLXJhZGl1czogMjFweDsNCiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7DQogICAgbGluZS1oZWlnaHQ6IDQxcHg7DQogICAgZm9udC1zaXplOiAxNXB4Ow0KICAgIGZvbnQtd2VpZ2h0OiA0MDA7DQogICAgY29sb3I6ICMzMzMzMzM7DQogICAgYm9yZGVyOiAxcHggc29saWQgI2NjY2NjYzsNCiAgfQ0KfQ0K"},{"version":3,"sources":["index.vue"],"names":[],"mappings":";AAkMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/pages/app/upload","sourcesContent":["<template>\r\n <div class=\"main\" v-loading=\"loading\">\r\n <div v-if=\"uploading\">\r\n <div class=\"img-list\" :class=\"{ 'none-card': imgList.length }\">\r\n <el-upload\r\n ref=\"upload\"\r\n :action=\"fileUrl\"\r\n list-type=\"picture-card\"\r\n :on-change=\"fileChange\"\r\n :on-error=\"fileError\"\r\n :before-upload=\"beforeUpload\"\r\n :file-list=\"imgList\"\r\n :auto-upload=\"false\"\r\n :multiple=\"true\"\r\n :limit=\"limit\"\r\n accept=\"image/*\"\r\n >\r\n <div slot=\"default\" class=\"upload-card\" v-if=\"!imgList.length\">\r\n <i class=\"el-icon-plus\"></i>\r\n <p class=\"text\">点击选择图片</p>\r\n </div>\r\n <div slot=\"file\" slot-scope=\"{ file }\">\r\n <img class=\"el-upload-list__item-thumbnail\" :src=\"file.url\" alt=\"\" />\r\n <i class=\"el-icon-error btndel\" v-db-click @click=\"handleRemove(file)\" />\r\n </div>\r\n </el-upload>\r\n </div>\r\n\r\n <div class=\"footer\">\r\n <div v-if=\"imgList.length\">共{{ imgList.length }}/{{ limit }}张，{{ (allSize / 1000000).toFixed(2) }} M</div>\r\n <div v-else></div>\r\n <div class=\"upload-btn\">\r\n <div v-if=\"imgList.length < limit\" class=\"btn\" v-db-click @click=\"selectImgs\">\r\n {{ imgList.length ? '继续选择' : '选择图片' }}\r\n </div>\r\n <div class=\"btn upload\" :class=\"{ 'no-pic': !imgList.length }\" v-db-click @click=\"submitUpload\">确认上传</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div v-else class=\"upload-success\">\r\n <div class=\"success\">\r\n <img class=\"image\" src=\"@/assets/images/success.jpg\" alt=\"\" />\r\n </div>\r\n <div class=\"text\">图片上传成功</div>\r\n <div class=\"again\" v-db-click @click=\"again\">继续上传</div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport Setting from '@/setting';\r\nimport { scanUpload } from '@/api/setting';\r\nimport compressImg from '@/utils/compressImg.js';\r\nimport { isPicUpload } from '@/utils';\r\n\r\nexport default {\r\n name: 'app_upload_file',\r\n data() {\r\n return {\r\n fileUrl: Setting.apiBaseURL + '/image/scan_upload',\r\n imgList: [],\r\n allSize: 0,\r\n token: '',\r\n uploading: true,\r\n limit: 20,\r\n loading: false,\r\n pid: 0,\r\n };\r\n },\r\n created() {\r\n this.token = this.$route.query.token;\r\n this.pid = this.$route.query.pid;\r\n document.title = '手机端扫码上传';\r\n },\r\n methods: {\r\n selectImgs() {\r\n if (this.loading) return;\r\n this.$refs['upload'].$refs['upload-inner'].handleClick();\r\n },\r\n again() {\r\n this.uploading = true;\r\n this.imgList = [];\r\n this.allSize = 0;\r\n },\r\n async submitUpload() {\r\n if (this.imgList.length) {\r\n if (this.loading) return;\r\n this.loading = true;\r\n for (let i = 0; i < this.imgList.length; i++) {\r\n const file = this.imgList[i].raw;\r\n await this.uploadItem(file);\r\n if (i == this.imgList.length - 1) {\r\n this.uploading = false;\r\n this.loading = false;\r\n }\r\n }\r\n } else {\r\n this.$message.warning('请先选择图片');\r\n }\r\n },\r\n handleRemove(file) {\r\n let index = this.imgList.findIndex((e) => {\r\n return e.url == file.url;\r\n });\r\n this.imgList.splice(index, 1);\r\n this.$nextTick((e) => {\r\n let s = 0;\r\n if (this.imgList.length) {\r\n this.imgList.map((e) => {\r\n s += e.raw.size;\r\n });\r\n this.allSize = s;\r\n } else {\r\n this.allSize = 0;\r\n }\r\n });\r\n },\r\n\r\n uploadItem(file) {\r\n return new Promise((resolve, reject) => {\r\n const formData = new FormData();\r\n formData.append('file', file);\r\n formData.append('uploadToken', this.token);\r\n formData.append('pid', this.pid);\r\n scanUpload(formData)\r\n .then((res) => {\r\n if (res.status == 200) {\r\n resolve();\r\n } else {\r\n this.loading = false;\r\n this.$message({\r\n message: '上传失败',\r\n type: 'error',\r\n duration: 1000,\r\n });\r\n }\r\n })\r\n .catch((err) => {\r\n this.loading = false;\r\n this.$message.error(err.msg);\r\n });\r\n });\r\n },\r\n fileError(err, file, fileList) {\r\n console.log(err, file, fileList);\r\n },\r\n beforeUpload(file) {\r\n return isPicUpload(file);\r\n },\r\n async fileChange(file, fileList) {\r\n if (file.size >= 2097152) {\r\n await this.comImg(file.raw).then((res) => {\r\n fileList.map((e) => {\r\n if (e.uid === file.uid) {\r\n this.allSize += res.size;\r\n e.raw = res;\r\n }\r\n });\r\n this.imgList = fileList;\r\n });\r\n } else {\r\n this.imgList = fileList;\r\n let s = 0;\r\n if (this.imgList.length) {\r\n this.imgList.map((e) => {\r\n s += e.raw.size;\r\n });\r\n this.allSize = s;\r\n } else {\r\n this.allSize = 0;\r\n }\r\n }\r\n },\r\n comImg(file) {\r\n return new Promise((resolve, reject) => {\r\n compressImg(file).then((res) => {\r\n resolve(res);\r\n });\r\n });\r\n },\r\n loadData(item, callback) {\r\n getCategoryListApi({\r\n pid: item.value,\r\n })\r\n .then(async (res) => {\r\n const data = res.data.list;\r\n callback(data);\r\n })\r\n .catch((res) => {});\r\n },\r\n },\r\n};\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n.upload-btn {\r\n display: flex;\r\n align-items: center;\r\n}\r\n.img-list {\r\n padding: 10px;\r\n overflow: scroll;\r\n height: calc(100vh - 50px);\r\n background-color: #fff;\r\n}\r\n\r\n::v-deep .el-upload-list--picture-card .el-upload-list__item {\r\n // width: 113px;\r\n // height: 113px;\r\n // line-height: 113px;\r\n // overflow: inherit;\r\n margin: 1% 1% 0px 1%;\r\n width: 31.3%;\r\n height: 31.3%;\r\n padding-top: 31.3%;\r\n aspect-ratio: 1 / 1;\r\n}\r\n::v-deep .el-upload-list--picture-card .el-upload-list__item > div {\r\n // position: relative;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n::v-deep .el-upload--picture-card {\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n height: 146px;\r\n justify-content: center;\r\n align-items: center;\r\n background: #f9f9f9;\r\n}\r\n::v-deep .el-upload-list--picture-card .el-upload-list__item img {\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 6px;\r\n object-fit: cover;\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n}\r\n.btndel {\r\n position: absolute;\r\n z-index: 1;\r\n font-size: 18px;\r\n right: -1px;\r\n top: -1px;\r\n color: #282828;\r\n opacity: 0.5;\r\n}\r\n::v-deep .el-upload--picture-card:hover,\r\n.el-upload:focus {\r\n border-color: #c0ccda;\r\n}\r\n.img-box {\r\n display: flex;\r\n padding-left: 100px;\r\n flex-wrap: wrap;\r\n}\r\n.none-card ::v-deep .el-upload--picture-card {\r\n display: none !important;\r\n}\r\n.footer {\r\n padding: 0 10px 0 15px;\r\n position: fixed;\r\n bottom: 0;\r\n width: 100%;\r\n box-sizing: border-box;\r\n background-color: rgba(255, 255, 255, 0.85);\r\n backdrop-filter: blur(10px);\r\n z-index: 277;\r\n border-top: 1px solid #f0f0f0;\r\n height: 50px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n .btn {\r\n border: 1px solid #cccccc;\r\n width: 88px;\r\n height: 30px;\r\n border-radius: 15px;\r\n color: #000;\r\n font-size: 14px;\r\n font-family: PingFang SC-Regular, PingFang SC;\r\n font-weight: 400;\r\n color: #666666;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .upload {\r\n background-color: #e93323;\r\n color: #fff;\r\n margin-left: 10px;\r\n }\r\n .upload.no-pic {\r\n background: #e93323;\r\n opacity: 0.3;\r\n }\r\n}\r\n.upload-card {\r\n display: flex;\r\n flex-direction: column;\r\n line-height: 16px;\r\n .el-icon-plus {\r\n font-size: 28px;\r\n font-weight: bold;\r\n color: #bbbbbb;\r\n }\r\n .text {\r\n font-size: 13px;\r\n font-weight: 400;\r\n color: #999999;\r\n margin-top: 18px;\r\n }\r\n}\r\n.upload-success {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n height: 80vh;\r\n .success {\r\n width: 50px;\r\n height: 50px;\r\n background: #4bbc12;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 20px;\r\n .image {\r\n width: 60%;\r\n }\r\n }\r\n .text {\r\n font-size: 16px;\r\n font-family: PingFang SC-Medium, PingFang SC;\r\n font-weight: 500;\r\n color: #282828;\r\n margin-bottom: 40px;\r\n }\r\n .again {\r\n width: 150px;\r\n height: 43px;\r\n border-radius: 21px;\r\n text-align: center;\r\n line-height: 41px;\r\n font-size: 15px;\r\n font-weight: 400;\r\n color: #333333;\r\n border: 1px solid #cccccc;\r\n }\r\n}\r\n</style>\r\n"]}]}
|
