You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1 line
11 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

{"remainingRequest":"D:\\code\\vue\\admin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\code\\vue\\admin\\src\\components\\common\\FileUpload.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\code\\vue\\admin\\src\\components\\common\\FileUpload.vue","mtime":1709633786000},{"path":"D:\\code\\vue\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\code\\vue\\admin\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000},{"path":"D:\\code\\vue\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\code\\vue\\admin\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KCmltcG9ydCBzdG9yYWdlIGZyb20gIkAvdXRpbHMvc3RvcmFnZSI7CmltcG9ydCBiYXNlIGZyb20gIkAvdXRpbHMvYmFzZSI7CmV4cG9ydCBkZWZhdWx0IHsKCWRhdGEoKSB7CgkJcmV0dXJuIHsKCQkJLy8g5p+l55yL5aSn5Zu+CgkJCWRpYWxvZ1Zpc2libGU6IGZhbHNlLAoJCQkvLyDmn6XnnIvlpKflm74KCQkJZGlhbG9nSW1hZ2VVcmw6ICIiLAoJCQkvLyDnu4Tku7bmuLLmn5Plm77niYfnmoTmlbDnu4TlrZfmrrXvvIzmnInnibnmrormoLzlvI/opoHmsYIKCQkJZmlsZUxpc3Q6IFtdLAoJCQlmaWxlVXJsTGlzdDogW10sCgkJCW15SGVhZGVyczoge30KCQl9OwoJfSwKCXByb3BzOiB7CgkJdGlwOiB7CgkJCXR5cGU6IFN0cmluZwoJCX0sCgkJYWN0aW9uOiB7CgkJCXR5cGU6IFN0cmluZwoJCX0sCgkJLyrlm77niYflpKflsI8qLwoJCWxpbWl0OiB7CgkJCXR5cGU6IE51bWJlciwKCQkJZGVmYXVsdDogMyAvL2tiCgkJfSwKCQltdWx0aXBsZTogewoJCQl0eXBlOiBCb29sZWFuLAoJCQlkZWZhdWx0OiBmYWxzZQoJCX0sCgkJZmlsZVVybHM6IHsKCQkJdHlwZTogU3RyaW5nCgkJfSwKCQl0eXBlOiB7CgkJCXR5cGU6IE51bWJlciwKCQkJZGVmYXVsdDogMQoJCX0KCX0sCgltb3VudGVkKCkgewoJCXRoaXMuaW5pdCgpOwoJCXRoaXMubXlIZWFkZXJzID0gewoJCQknVG9rZW4nOiBzdG9yYWdlLmdldCgiVG9rZW4iKQoJCX0KCX0sCgl3YXRjaDogewoJCWZpbGVVcmxzOiBmdW5jdGlvbih2YWwsIG9sZFZhbCkgewoJCQkvLyAgIGNvbnNvbGUubG9nKCJuZXc6ICVzLCBvbGQ6ICVzIiwgdmFsLCBvbGRWYWwpOwoJCQl0aGlzLmluaXQoKTsKCQl9Cgl9LAoJY29tcHV0ZWQ6IHsKCQkvLyDorqHnrpflsZ7mgKfnmoQgZ2V0dGVyCgkJZ2V0QWN0aW9uVXJsOiBmdW5jdGlvbigpIHsKCQkJLy8gcmV0dXJuIGJhc2UudXJsICsgdGhpcy5hY3Rpb24gKyAiP3Rva2VuPSIgKyBzdG9yYWdlLmdldCgidG9rZW4iKTsKCQkJcmV0dXJuIGAvJHt0aGlzLiRiYXNlLm5hbWV9L2AgKyB0aGlzLmFjdGlvbjsKCQl9Cgl9LAoJbWV0aG9kczogewoJCS8vIOWIneWni+WMlgoJCWluaXQoKSB7CgkJCS8vICAgY29uc29sZS5sb2codGhpcy5maWxlVXJscyk7CgkJCWlmICh0aGlzLmZpbGVVcmxzKSB7CgkJCQl0aGlzLmZpbGVVcmxMaXN0ID0gdGhpcy5maWxlVXJscy5zcGxpdCgiLCIpOwoJCQkJbGV0IGZpbGVBcnJheSA9IFtdOwoJCQkJdGhpcy5maWxlVXJsTGlzdC5mb3JFYWNoKGZ1bmN0aW9uKGl0ZW0sIGluZGV4KSB7CgkJCQkJdmFyIHVybCA9IGl0ZW07CgkJCQkJdmFyIG5hbWUgPSBpbmRleDsKCQkJCQl2YXIgZmlsZSA9IHsKCQkJCQkJbmFtZTogbmFtZSwKCQkJCQkJdXJsOiB1cmwKCQkJCQl9OwoJCQkJCWZpbGVBcnJheS5wdXNoKGZpbGUpOwoJCQkJfSk7CgkJCQl0aGlzLnNldEZpbGVMaXN0KGZpbGVBcnJheSk7CgkJCX0KCQl9LAoJCWhhbmRsZUJlZm9yZVVwbG9hZChmaWxlKSB7CgoJCX0sCgkJLy8g5LiK5Lyg5paH5Lu25oiQ5Yqf5ZCO5omn6KGMCgkJaGFuZGxlVXBsb2FkU3VjY2VzcyhyZXMsIGZpbGUsIGZpbGVMaXN0KSB7CgkJCWlmIChyZXMgJiYgcmVzLmNvZGUgPT09IDApIHsKCQkJCWZpbGVMaXN0W2ZpbGVMaXN0Lmxlbmd0aCAtIDFdWyJ1cmwiXSA9ICJ1cGxvYWQvIiArIGZpbGUucmVzcG9uc2UuZmlsZTsKCQkJCXRoaXMuc2V0RmlsZUxpc3QoZmlsZUxpc3QpOwoJCQkJdGhpcy4kZW1pdCgiY2hhbmdlIiwgdGhpcy5maWxlVXJsTGlzdC5qb2luKCIsIikpOwoJCQl9IGVsc2UgewoJCQkJdGhpcy4kbWVzc2FnZS5lcnJvcihyZXMubXNnKTsKCQkJfQoJCX0sCgkJLy8g5Zu+54mH5LiK5Lyg5aSx6LSlCgkJaGFuZGxlVXBsb2FkRXJyKGVyciwgZmlsZSwgZmlsZUxpc3QpIHsKCQkJdGhpcy4kbWVzc2FnZS5lcnJvcigi5paH5Lu25LiK5Lyg5aSx6LSlIik7CgkJfSwKCQkvLyDnp7vpmaTlm77niYcKCQloYW5kbGVSZW1vdmUoZmlsZSwgZmlsZUxpc3QpIHsKCQkJdGhpcy5zZXRGaWxlTGlzdChmaWxlTGlzdCk7CgkJCXRoaXMuJGVtaXQoImNoYW5nZSIsIHRoaXMuZmlsZVVybExpc3Quam9pbigiLCIpKTsKCQl9LAoJCS8vIOafpeeci+Wkp+WbvgoJCWhhbmRsZVVwbG9hZFByZXZpZXcoZmlsZSkgewoJCQlpZih0aGlzLnR5cGU+Mil7CgkJCQl3aW5kb3cub3BlbihmaWxlLnVybCkKCQkJCXJldHVybiBmYWxzZQoJCQl9CgkJCXRoaXMuZGlhbG9nSW1hZ2VVcmwgPSBmaWxlLnVybDsKCQkJdGhpcy5kaWFsb2dWaXNpYmxlID0gdHJ1ZTsKCQl9LAoJCS8vIOmZkOWItuWbvueJh+aVsOmHjwoJCWhhbmRsZUV4Y2VlZChmaWxlcywgZmlsZUxpc3QpIHsKCQkJdGhpcy4kbWVzc2FnZS53YXJuaW5nKGDmnIDlpJrkuIrkvKAke3RoaXMubGltaXR95byg5Zu+54mHYCk7CgkJfSwKCQkvLyDph43mlrDlr7lmaWxlTGlzdOi/m+ihjOi1i+WAvAoJCXNldEZpbGVMaXN0KGZpbGVMaXN0KSB7CgkJCXZhciBmaWxlQXJyYXkgPSBbXTsKCQkJdmFyIGZpbGVVcmxBcnJheSA9IFtdOwoJCQkvLyDmnInkupvlm77niYfkuI3mmK/lhazlvIDnmoTvvIzmiYDku6XpnIDopoHmkLrluKZ0b2tlbuS/oeaBr+WBmuadg+mZkOagoemqjAoJCQl2YXIgdG9rZW4gPSBzdG9yYWdlLmdldCgidG9rZW4iKTsKCQkJbGV0IF90aGlzID0gdGhpczsKCQkJZmlsZUxpc3QuZm9yRWFjaChmdW5jdGlvbihpdGVtLCBpbmRleCkgewoJCQkJdmFyIHVybCA9IGl0ZW0udXJsLnNwbGl0KCI/IilbMF07CgkJCQlpZiAoIXVybC5zdGFydHNXaXRoKCJodHRwIikpIHsKCQkJCQl1cmwgPSBfdGhpcy4kYmFzZS51cmwgKyB1cmwKCQkJCX0KCQkJCXZhciBuYW1lID0gaXRlbS5uYW1lOwoJCQkJdmFyIGZpbGUgPSB7CgkJCQkJbmFtZTogbmFtZSwKCQkJCQl1cmw6IHVybCArICI/dG9rZW49IiArIHRva2VuCgkJCQl9OwoJCQkJZmlsZUFycmF5LnB1c2goZmlsZSk7CgkJCQlmaWxlVXJsQXJyYXkucHVzaCh1cmwpOwoJCQl9KTsKCQkJdGhpcy5maWxlTGlzdCA9IGZpbGVBcnJheTsKCQkJdGhpcy5maWxlVXJsTGlzdCA9IGZpbGVVcmxBcnJheTsKCQl9Cgl9Cn07Cg=="},{"version":3,"sources":["FileUpload.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAyBA;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;;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","file":"FileUpload.vue","sourceRoot":"src/components/common","sourcesContent":["<template>\r\n\t<div>\r\n\t\t<!-- 上传文件组件 -->\r\n\t\t<el-upload v-if=\"type==1\" ref=\"upload\" :action=\"getActionUrl\" list-type=\"picture-card\" :multiple=\"multiple\" :limit=\"limit\"\r\n\t\t\t:headers=\"myHeaders\" :file-list=\"fileList\" :on-exceed=\"handleExceed\" :on-preview=\"handleUploadPreview\"\r\n\t\t\t:on-remove=\"handleRemove\" :on-success=\"handleUploadSuccess\" :on-error=\"handleUploadErr\"\r\n\t\t\t:before-upload=\"handleBeforeUpload\">\r\n\t\t\t<i class=\"el-icon-plus\"></i>\r\n\t\t\t<div slot=\"tip\" class=\"el-upload__tip\" style=\"color:#838fa1;\">{{tip}}</div>\r\n\t\t</el-upload>\r\n\t\t<el-upload v-else drag ref=\"upload\" :action=\"getActionUrl\" :multiple=\"multiple\" :limit=\"limit\"\r\n\t\t\t:headers=\"myHeaders\" :file-list=\"fileList\" :on-exceed=\"handleExceed\" :on-preview=\"handleUploadPreview\"\r\n\t\t\t:on-remove=\"handleRemove\" :on-success=\"handleUploadSuccess\" :on-error=\"handleUploadErr\"\r\n\t\t\t:before-upload=\"handleBeforeUpload\">\r\n\t\t\t<i class=\"el-icon-upload\"></i>\r\n\t\t\t <div class=\"el-upload__text\">将文件拖到此处,或<em>点击上传</em></div>\r\n\t\t\t<div slot=\"tip\" class=\"el-upload__tip\" style=\"color:#838fa1;\">{{tip}}</div>\r\n\t\t</el-upload>\r\n\t\t<el-dialog :visible.sync=\"dialogVisible\" size=\"tiny\" append-to-body>\r\n\t\t\t<img width=\"100%\" v-if=\"type==1\" :src=\"dialogImageUrl\" alt>\r\n\t\t\t<video width=\"100%\" v-if=\"type==2\" :src=\"dialogImageUrl\" alt controls />\r\n\t\t</el-dialog>\r\n\t</div>\r\n</template>\r\n<script>\r\n\timport storage from \"@/utils/storage\";\r\n\timport base from \"@/utils/base\";\r\n\texport default {\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\t// 查看大图\r\n\t\t\t\tdialogVisible: false,\r\n\t\t\t\t// 查看大图\r\n\t\t\t\tdialogImageUrl: \"\",\r\n\t\t\t\t// 组件渲染图片的数组字段,有特殊格式要求\r\n\t\t\t\tfileList: [],\r\n\t\t\t\tfileUrlList: [],\r\n\t\t\t\tmyHeaders: {}\r\n\t\t\t};\r\n\t\t},\r\n\t\tprops: {\r\n\t\t\ttip: {\r\n\t\t\t\ttype: String\r\n\t\t\t},\r\n\t\t\taction: {\r\n\t\t\t\ttype: String\r\n\t\t\t},\r\n\t\t\t/*图片大小*/\r\n\t\t\tlimit: {\r\n\t\t\t\ttype: Number,\r\n\t\t\t\tdefault: 3 //kb\r\n\t\t\t},\r\n\t\t\tmultiple: {\r\n\t\t\t\ttype: Boolean,\r\n\t\t\t\tdefault: false\r\n\t\t\t},\r\n\t\t\tfileUrls: {\r\n\t\t\t\ttype: String\r\n\t\t\t},\r\n\t\t\ttype: {\r\n\t\t\t\ttype: Number,\r\n\t\t\t\tdefault: 1\r\n\t\t\t}\r\n\t\t},\r\n\t\tmounted() {\r\n\t\t\tthis.init();\r\n\t\t\tthis.myHeaders = {\r\n\t\t\t\t'Token': storage.get(\"Token\")\r\n\t\t\t}\r\n\t\t},\r\n\t\twatch: {\r\n\t\t\tfileUrls: function(val, oldVal) {\r\n\t\t\t\t// console.log(\"new: %s, old: %s\", val, oldVal);\r\n\t\t\t\tthis.init();\r\n\t\t\t}\r\n\t\t},\r\n\t\tcomputed: {\r\n\t\t\t// 计算属性的 getter\r\n\t\t\tgetActionUrl: function() {\r\n\t\t\t\t// return base.url + this.action + \"?token=\" + storage.get(\"token\");\r\n\t\t\t\treturn `/${this.$base.name}/` + this.action;\r\n\t\t\t}\r\n\t\t},\r\n\t\tmethods: {\r\n\t\t\t// 初始化\r\n\t\t\tinit() {\r\n\t\t\t\t// console.log(this.fileUrls);\r\n\t\t\t\tif (this.fileUrls) {\r\n\t\t\t\t\tthis.fileUrlList = this.fileUrls.split(\",\");\r\n\t\t\t\t\tlet fileArray = [];\r\n\t\t\t\t\tthis.fileUrlList.forEach(function(item, index) {\r\n\t\t\t\t\t\tvar url = item;\r\n\t\t\t\t\t\tvar name = index;\r\n\t\t\t\t\t\tvar file = {\r\n\t\t\t\t\t\t\tname: name,\r\n\t\t\t\t\t\t\turl: url\r\n\t\t\t\t\t\t};\r\n\t\t\t\t\t\tfileArray.push(file);\r\n\t\t\t\t\t});\r\n\t\t\t\t\tthis.setFileList(fileArray);\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\thandleBeforeUpload(file) {\r\n\r\n\t\t\t},\r\n\t\t\t// 上传文件成功后执行\r\n\t\t\thandleUploadSuccess(res, file, fileList) {\r\n\t\t\t\tif (res && res.code === 0) {\r\n\t\t\t\t\tfileList[fileList.length - 1][\"url\"] = \"upload/\" + file.response.file;\r\n\t\t\t\t\tthis.setFileList(fileList);\r\n\t\t\t\t\tthis.$emit(\"change\", this.fileUrlList.join(\",\"));\r\n\t\t\t\t} else {\r\n\t\t\t\t\tthis.$message.error(res.msg);\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t// 图片上传失败\r\n\t\t\thandleUploadErr(err, file, fileList) {\r\n\t\t\t\tthis.$message.error(\"文件上传失败\");\r\n\t\t\t},\r\n\t\t\t// 移除图片\r\n\t\t\thandleRemove(file, fileList) {\r\n\t\t\t\tthis.setFileList(fileList);\r\n\t\t\t\tthis.$emit(\"change\", this.fileUrlList.join(\",\"));\r\n\t\t\t},\r\n\t\t\t// 查看大图\r\n\t\t\thandleUploadPreview(file) {\r\n\t\t\t\tif(this.type>2){\r\n\t\t\t\t\twindow.open(file.url)\r\n\t\t\t\t\treturn false\r\n\t\t\t\t}\r\n\t\t\t\tthis.dialogImageUrl = file.url;\r\n\t\t\t\tthis.dialogVisible = true;\r\n\t\t\t},\r\n\t\t\t// 限制图片数量\r\n\t\t\thandleExceed(files, fileList) {\r\n\t\t\t\tthis.$message.warning(`最多上传${this.limit}张图片`);\r\n\t\t\t},\r\n\t\t\t// 重新对fileList进行赋值\r\n\t\t\tsetFileList(fileList) {\r\n\t\t\t\tvar fileArray = [];\r\n\t\t\t\tvar fileUrlArray = [];\r\n\t\t\t\t// 有些图片不是公开的所以需要携带token信息做权限校验\r\n\t\t\t\tvar token = storage.get(\"token\");\r\n\t\t\t\tlet _this = this;\r\n\t\t\t\tfileList.forEach(function(item, index) {\r\n\t\t\t\t\tvar url = item.url.split(\"?\")[0];\r\n\t\t\t\t\tif (!url.startsWith(\"http\")) {\r\n\t\t\t\t\t\turl = _this.$base.url + url\r\n\t\t\t\t\t}\r\n\t\t\t\t\tvar name = item.name;\r\n\t\t\t\t\tvar file = {\r\n\t\t\t\t\t\tname: name,\r\n\t\t\t\t\t\turl: url + \"?token=\" + token\r\n\t\t\t\t\t};\r\n\t\t\t\t\tfileArray.push(file);\r\n\t\t\t\t\tfileUrlArray.push(url);\r\n\t\t\t\t});\r\n\t\t\t\tthis.fileList = fileArray;\r\n\t\t\t\tthis.fileUrlList = fileUrlArray;\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n</style>"]}]}