| 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=script&lang=js","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\pages\\app\\upload\\index.vue","mtime":1761614939006},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\babel-loader\\lib\\index.js","mtime":1761614927320},{"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:DQppbXBvcnQgU2V0dGluZyBmcm9tICdAL3NldHRpbmcnOw0KaW1wb3J0IHsgc2NhblVwbG9hZCB9IGZyb20gJ0AvYXBpL3NldHRpbmcnOw0KaW1wb3J0IGNvbXByZXNzSW1nIGZyb20gJ0AvdXRpbHMvY29tcHJlc3NJbWcuanMnOw0KaW1wb3J0IHsgaXNQaWNVcGxvYWQgfSBmcm9tICdAL3V0aWxzJzsNCg0KZXhwb3J0IGRlZmF1bHQgew0KICBuYW1lOiAnYXBwX3VwbG9hZF9maWxlJywNCiAgZGF0YSgpIHsNCiAgICByZXR1cm4gew0KICAgICAgZmlsZVVybDogU2V0dGluZy5hcGlCYXNlVVJMICsgJy9pbWFnZS9zY2FuX3VwbG9hZCcsDQogICAgICBpbWdMaXN0OiBbXSwNCiAgICAgIGFsbFNpemU6IDAsDQogICAgICB0b2tlbjogJycsDQogICAgICB1cGxvYWRpbmc6IHRydWUsDQogICAgICBsaW1pdDogMjAsDQogICAgICBsb2FkaW5nOiBmYWxzZSwNCiAgICAgIHBpZDogMCwNCiAgICB9Ow0KICB9LA0KICBjcmVhdGVkKCkgew0KICAgIHRoaXMudG9rZW4gPSB0aGlzLiRyb3V0ZS5xdWVyeS50b2tlbjsNCiAgICB0aGlzLnBpZCA9IHRoaXMuJHJvdXRlLnF1ZXJ5LnBpZDsNCiAgICBkb2N1bWVudC50aXRsZSA9ICfmiYvmnLrnq6/miavnoIHkuIrkvKAnOw0KICB9LA0KICBtZXRob2RzOiB7DQogICAgc2VsZWN0SW1ncygpIHsNCiAgICAgIGlmICh0aGlzLmxvYWRpbmcpIHJldHVybjsNCiAgICAgIHRoaXMuJHJlZnNbJ3VwbG9hZCddLiRyZWZzWyd1cGxvYWQtaW5uZXInXS5oYW5kbGVDbGljaygpOw0KICAgIH0sDQogICAgYWdhaW4oKSB7DQogICAgICB0aGlzLnVwbG9hZGluZyA9IHRydWU7DQogICAgICB0aGlzLmltZ0xpc3QgPSBbXTsNCiAgICAgIHRoaXMuYWxsU2l6ZSA9IDA7DQogICAgfSwNCiAgICBhc3luYyBzdWJtaXRVcGxvYWQoKSB7DQogICAgICBpZiAodGhpcy5pbWdMaXN0Lmxlbmd0aCkgew0KICAgICAgICBpZiAodGhpcy5sb2FkaW5nKSByZXR1cm47DQogICAgICAgIHRoaXMubG9hZGluZyA9IHRydWU7DQogICAgICAgIGZvciAobGV0IGkgPSAwOyBpIDwgdGhpcy5pbWdMaXN0Lmxlbmd0aDsgaSsrKSB7DQogICAgICAgICAgY29uc3QgZmlsZSA9IHRoaXMuaW1nTGlzdFtpXS5yYXc7DQogICAgICAgICAgYXdhaXQgdGhpcy51cGxvYWRJdGVtKGZpbGUpOw0KICAgICAgICAgIGlmIChpID09IHRoaXMuaW1nTGlzdC5sZW5ndGggLSAxKSB7DQogICAgICAgICAgICB0aGlzLnVwbG9hZGluZyA9IGZhbHNlOw0KICAgICAgICAgICAgdGhpcy5sb2FkaW5nID0gZmFsc2U7DQogICAgICAgICAgfQ0KICAgICAgICB9DQogICAgICB9IGVsc2Ugew0KICAgICAgICB0aGlzLiRtZXNzYWdlLndhcm5pbmcoJ+ivt+WFiOmAieaLqeWbvueJhycpOw0KICAgICAgfQ0KICAgIH0sDQogICAgaGFuZGxlUmVtb3ZlKGZpbGUpIHsNCiAgICAgIGxldCBpbmRleCA9IHRoaXMuaW1nTGlzdC5maW5kSW5kZXgoKGUpID0+IHsNCiAgICAgICAgcmV0dXJuIGUudXJsID09IGZpbGUudXJsOw0KICAgICAgfSk7DQogICAgICB0aGlzLmltZ0xpc3Quc3BsaWNlKGluZGV4LCAxKTsNCiAgICAgIHRoaXMuJG5leHRUaWNrKChlKSA9PiB7DQogICAgICAgIGxldCBzID0gMDsNCiAgICAgICAgaWYgKHRoaXMuaW1nTGlzdC5sZW5ndGgpIHsNCiAgICAgICAgICB0aGlzLmltZ0xpc3QubWFwKChlKSA9PiB7DQogICAgICAgICAgICBzICs9IGUucmF3LnNpemU7DQogICAgICAgICAgfSk7DQogICAgICAgICAgdGhpcy5hbGxTaXplID0gczsNCiAgICAgICAgfSBlbHNlIHsNCiAgICAgICAgICB0aGlzLmFsbFNpemUgPSAwOw0KICAgICAgICB9DQogICAgICB9KTsNCiAgICB9LA0KDQogICAgdXBsb2FkSXRlbShmaWxlKSB7DQogICAgICByZXR1cm4gbmV3IFByb21pc2UoKHJlc29sdmUsIHJlamVjdCkgPT4gew0KICAgICAgICBjb25zdCBmb3JtRGF0YSA9IG5ldyBGb3JtRGF0YSgpOw0KICAgICAgICBmb3JtRGF0YS5hcHBlbmQoJ2ZpbGUnLCBmaWxlKTsNCiAgICAgICAgZm9ybURhdGEuYXBwZW5kKCd1cGxvYWRUb2tlbicsIHRoaXMudG9rZW4pOw0KICAgICAgICBmb3JtRGF0YS5hcHBlbmQoJ3BpZCcsIHRoaXMucGlkKTsNCiAgICAgICAgc2NhblVwbG9hZChmb3JtRGF0YSkNCiAgICAgICAgICAudGhlbigocmVzKSA9PiB7DQogICAgICAgICAgICBpZiAocmVzLnN0YXR1cyA9PSAyMDApIHsNCiAgICAgICAgICAgICAgcmVzb2x2ZSgpOw0KICAgICAgICAgICAgfSBlbHNlIHsNCiAgICAgICAgICAgICAgdGhpcy5sb2FkaW5nID0gZmFsc2U7DQogICAgICAgICAgICAgIHRoaXMuJG1lc3NhZ2Uoew0KICAgICAgICAgICAgICAgIG1lc3NhZ2U6ICfkuIrkvKDlpLHotKUnLA0KICAgICAgICAgICAgICAgIHR5cGU6ICdlcnJvcicsDQogICAgICAgICAgICAgICAgZHVyYXRpb246IDEwMDAsDQogICAgICAgICAgICAgIH0pOw0KICAgICAgICAgICAgfQ0KICAgICAgICAgIH0pDQogICAgICAgICAgLmNhdGNoKChlcnIpID0+IHsNCiAgICAgICAgICAgIHRoaXMubG9hZGluZyA9IGZhbHNlOw0KICAgICAgICAgICAgdGhpcy4kbWVzc2FnZS5lcnJvcihlcnIubXNnKTsNCiAgICAgICAgICB9KTsNCiAgICAgIH0pOw0KICAgIH0sDQogICAgZmlsZUVycm9yKGVyciwgZmlsZSwgZmlsZUxpc3QpIHsNCiAgICAgIGNvbnNvbGUubG9nKGVyciwgZmlsZSwgZmlsZUxpc3QpOw0KICAgIH0sDQogICAgYmVmb3JlVXBsb2FkKGZpbGUpIHsNCiAgICAgIHJldHVybiBpc1BpY1VwbG9hZChmaWxlKTsNCiAgICB9LA0KICAgIGFzeW5jIGZpbGVDaGFuZ2UoZmlsZSwgZmlsZUxpc3QpIHsNCiAgICAgIGlmIChmaWxlLnNpemUgPj0gMjA5NzE1Mikgew0KICAgICAgICBhd2FpdCB0aGlzLmNvbUltZyhmaWxlLnJhdykudGhlbigocmVzKSA9PiB7DQogICAgICAgICAgZmlsZUxpc3QubWFwKChlKSA9PiB7DQogICAgICAgICAgICBpZiAoZS51aWQgPT09IGZpbGUudWlkKSB7DQogICAgICAgICAgICAgIHRoaXMuYWxsU2l6ZSArPSByZXMuc2l6ZTsNCiAgICAgICAgICAgICAgZS5yYXcgPSByZXM7DQogICAgICAgICAgICB9DQogICAgICAgICAgfSk7DQogICAgICAgICAgdGhpcy5pbWdMaXN0ID0gZmlsZUxpc3Q7DQogICAgICAgIH0pOw0KICAgICAgfSBlbHNlIHsNCiAgICAgICAgdGhpcy5pbWdMaXN0ID0gZmlsZUxpc3Q7DQogICAgICAgIGxldCBzID0gMDsNCiAgICAgICAgaWYgKHRoaXMuaW1nTGlzdC5sZW5ndGgpIHsNCiAgICAgICAgICB0aGlzLmltZ0xpc3QubWFwKChlKSA9PiB7DQogICAgICAgICAgICBzICs9IGUucmF3LnNpemU7DQogICAgICAgICAgfSk7DQogICAgICAgICAgdGhpcy5hbGxTaXplID0gczsNCiAgICAgICAgfSBlbHNlIHsNCiAgICAgICAgICB0aGlzLmFsbFNpemUgPSAwOw0KICAgICAgICB9DQogICAgICB9DQogICAgfSwNCiAgICBjb21JbWcoZmlsZSkgew0KICAgICAgcmV0dXJuIG5ldyBQcm9taXNlKChyZXNvbHZlLCByZWplY3QpID0+IHsNCiAgICAgICAgY29tcHJlc3NJbWcoZmlsZSkudGhlbigocmVzKSA9PiB7DQogICAgICAgICAgcmVzb2x2ZShyZXMpOw0KICAgICAgICB9KTsNCiAgICAgIH0pOw0KICAgIH0sDQogICAgbG9hZERhdGEoaXRlbSwgY2FsbGJhY2spIHsNCiAgICAgIGdldENhdGVnb3J5TGlzdEFwaSh7DQogICAgICAgIHBpZDogaXRlbS52YWx1ZSwNCiAgICAgIH0pDQogICAgICAgIC50aGVuKGFzeW5jIChyZXMpID0+IHsNCiAgICAgICAgICBjb25zdCBkYXRhID0gcmVzLmRhdGEubGlzdDsNCiAgICAgICAgICBjYWxsYmFjayhkYXRhKTsNCiAgICAgICAgfSkNCiAgICAgICAgLmNhdGNoKChyZXMpID0+IHt9KTsNCiAgICB9LA0KICB9LA0KfTsNCg=="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";AAkDA;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;;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","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"]}]}
|
