{"remainingRequest":"D:\\Desktop\\supervision-ui\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\Desktop\\supervision-ui\\src\\components\\ImageUpload\\index.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\Desktop\\supervision-ui\\src\\components\\ImageUpload\\index.vue","mtime":1647101026763},{"path":"D:\\Desktop\\supervision-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1647101096564},{"path":"D:\\Desktop\\supervision-ui\\node_modules\\babel-loader\\lib\\index.js","mtime":1647101099358},{"path":"D:\\Desktop\\supervision-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1647101096564},{"path":"D:\\Desktop\\supervision-ui\\node_modules\\vue-loader\\lib\\index.js","mtime":1647101100033}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KDQppbXBvcnQgeyBnZXRUb2tlbiB9IGZyb20gIkAvdXRpbHMvYXV0aCI7DQoNCmV4cG9ydCBkZWZhdWx0IHsNCiAgcHJvcHM6IHsNCiAgICB2YWx1ZTogW1N0cmluZywgT2JqZWN0LCBBcnJheV0sDQogICAgLy8g5Zu+54mH5pWw6YeP6ZmQ5Yi2DQogICAgbGltaXQ6IHsNCiAgICAgIHR5cGU6IE51bWJlciwNCiAgICAgIGRlZmF1bHQ6IDUsDQogICAgfSwNCiAgICAvLyDlpKflsI/pmZDliLYoTUIpDQogICAgZmlsZVNpemU6IHsNCiAgICAgICB0eXBlOiBOdW1iZXIsDQogICAgICBkZWZhdWx0OiA1LA0KICAgIH0sDQogICAgLy8g5paH5Lu257G75Z6LLCDkvovlpoJbJ3BuZycsICdqcGcnLCAnanBlZyddDQogICAgZmlsZVR5cGU6IHsNCiAgICAgIHR5cGU6IEFycmF5LA0KICAgICAgZGVmYXVsdDogKCkgPT4gWyJwbmciLCAianBnIiwgImpwZWciXSwNCiAgICB9LA0KICAgIC8vIOaYr+WQpuaYvuekuuaPkOekug0KICAgIGlzU2hvd1RpcDogew0KICAgICAgdHlwZTogQm9vbGVhbiwNCiAgICAgIGRlZmF1bHQ6IHRydWUNCiAgICB9DQogIH0sDQogIGRhdGEoKSB7DQogICAgcmV0dXJuIHsNCiAgICAgIGRpYWxvZ0ltYWdlVXJsOiAiIiwNCiAgICAgIGRpYWxvZ1Zpc2libGU6IGZhbHNlLA0KICAgICAgaGlkZVVwbG9hZDogZmFsc2UsDQogICAgICBiYXNlVXJsOiBwcm9jZXNzLmVudi5WVUVfQVBQX0JBU0VfQVBJLA0KICAgICAgdXBsb2FkSW1nVXJsOiBwcm9jZXNzLmVudi5WVUVfQVBQX0JBU0VfQVBJICsgIi9jb21tb24vdXBsb2FkIiwgLy8g5LiK5Lyg55qE5Zu+54mH5pyN5Yqh5Zmo5Zyw5Z2ADQogICAgICBoZWFkZXJzOiB7DQogICAgICAgIEF1dGhvcml6YXRpb246ICJCZWFyZXIgIiArIGdldFRva2VuKCksDQogICAgICB9LA0KICAgICAgZmlsZUxpc3Q6IFtdDQogICAgfTsNCiAgfSwNCiAgd2F0Y2g6IHsNCiAgICB2YWx1ZTogew0KICAgICAgaGFuZGxlcih2YWwpIHsNCiAgICAgICAgaWYgKHZhbCkgew0KICAgICAgICAgIC8vIOmmluWFiOWwhuWAvOi9rOS4uuaVsOe7hA0KICAgICAgICAgIGNvbnN0IGxpc3QgPSBBcnJheS5pc0FycmF5KHZhbCkgPyB2YWwgOiB0aGlzLnZhbHVlLnNwbGl0KCcsJyk7DQogICAgICAgICAgLy8g54S25ZCO5bCG5pWw57uE6L2s5Li65a+56LGh5pWw57uEDQogICAgICAgICAgdGhpcy5maWxlTGlzdCA9IGxpc3QubWFwKGl0ZW0gPT4gew0KICAgICAgICAgICAgaWYgKHR5cGVvZiBpdGVtID09PSAic3RyaW5nIikgew0KICAgICAgICAgICAgICBpZiAoaXRlbS5pbmRleE9mKHRoaXMuYmFzZVVybCkgPT09IC0xKSB7DQogICAgICAgICAgICAgICAgICBpdGVtID0geyBuYW1lOiB0aGlzLmJhc2VVcmwgKyBpdGVtLCB1cmw6IHRoaXMuYmFzZVVybCArIGl0ZW0gfTsNCiAgICAgICAgICAgICAgfSBlbHNlIHsNCiAgICAgICAgICAgICAgICAgIGl0ZW0gPSB7IG5hbWU6IGl0ZW0sIHVybDogaXRlbSB9Ow0KICAgICAgICAgICAgICB9DQogICAgICAgICAgICB9DQogICAgICAgICAgICByZXR1cm4gaXRlbTsNCiAgICAgICAgICB9KTsNCiAgICAgICAgfSBlbHNlIHsNCiAgICAgICAgICB0aGlzLmZpbGVMaXN0ID0gW107DQogICAgICAgICAgcmV0dXJuIFtdOw0KICAgICAgICB9DQogICAgICB9LA0KICAgICAgZGVlcDogdHJ1ZSwNCiAgICAgIGltbWVkaWF0ZTogdHJ1ZQ0KICAgIH0NCiAgfSwNCiAgY29tcHV0ZWQ6IHsNCiAgICAvLyDmmK/lkKbmmL7npLrmj5DnpLoNCiAgICBzaG93VGlwKCkgew0KICAgICAgcmV0dXJuIHRoaXMuaXNTaG93VGlwICYmICh0aGlzLmZpbGVUeXBlIHx8IHRoaXMuZmlsZVNpemUpOw0KICAgIH0sDQogIH0sDQogIG1ldGhvZHM6IHsNCiAgICAvLyDliKDpmaTlm77niYcNCiAgICBoYW5kbGVSZW1vdmUoZmlsZSwgZmlsZUxpc3QpIHsNCiAgICAgIGNvbnN0IGZpbmRleCA9IHRoaXMuZmlsZUxpc3QubWFwKGYgPT4gZi5uYW1lKS5pbmRleE9mKGZpbGUubmFtZSk7DQogICAgICBpZihmaW5kZXggPiAtMSkgew0KICAgICAgICB0aGlzLmZpbGVMaXN0LnNwbGljZShmaW5kZXgsIDEpOw0KICAgICAgICB0aGlzLiRlbWl0KCJpbnB1dCIsIHRoaXMubGlzdFRvU3RyaW5nKHRoaXMuZmlsZUxpc3QpKTsNCiAgICAgIH0NCiAgICB9LA0KICAgIC8vIOS4iuS8oOaIkOWKn+Wbnuiwgw0KICAgIGhhbmRsZVVwbG9hZFN1Y2Nlc3MocmVzKSB7DQogICAgICB0aGlzLmZpbGVMaXN0LnB1c2goeyBuYW1lOiByZXMuZmlsZU5hbWUsIHVybDogcmVzLmZpbGVOYW1lIH0pOw0KICAgICAgdGhpcy4kZW1pdCgiaW5wdXQiLCB0aGlzLmxpc3RUb1N0cmluZyh0aGlzLmZpbGVMaXN0KSk7DQogICAgICB0aGlzLmxvYWRpbmcuY2xvc2UoKTsNCiAgICB9LA0KICAgIC8vIOS4iuS8oOWJjWxvYWRpbmfliqDovb0NCiAgICBoYW5kbGVCZWZvcmVVcGxvYWQoZmlsZSkgew0KICAgICAgbGV0IGlzSW1nID0gZmFsc2U7DQogICAgICBpZiAodGhpcy5maWxlVHlwZS5sZW5ndGgpIHsNCiAgICAgICAgbGV0IGZpbGVFeHRlbnNpb24gPSAiIjsNCiAgICAgICAgaWYgKGZpbGUubmFtZS5sYXN0SW5kZXhPZigiLiIpID4gLTEpIHsNCiAgICAgICAgICBmaWxlRXh0ZW5zaW9uID0gZmlsZS5uYW1lLnNsaWNlKGZpbGUubmFtZS5sYXN0SW5kZXhPZigiLiIpICsgMSk7DQogICAgICAgIH0NCiAgICAgICAgaXNJbWcgPSB0aGlzLmZpbGVUeXBlLnNvbWUodHlwZSA9PiB7DQogICAgICAgICAgaWYgKGZpbGUudHlwZS5pbmRleE9mKHR5cGUpID4gLTEpIHJldHVybiB0cnVlOw0KICAgICAgICAgIGlmIChmaWxlRXh0ZW5zaW9uICYmIGZpbGVFeHRlbnNpb24uaW5kZXhPZih0eXBlKSA+IC0xKSByZXR1cm4gdHJ1ZTsNCiAgICAgICAgICByZXR1cm4gZmFsc2U7DQogICAgICAgIH0pOw0KICAgICAgfSBlbHNlIHsNCiAgICAgICAgaXNJbWcgPSBmaWxlLnR5cGUuaW5kZXhPZigiaW1hZ2UiKSA+IC0xOw0KICAgICAgfQ0KDQogICAgICBpZiAoIWlzSW1nKSB7DQogICAgICAgIHRoaXMuJG1lc3NhZ2UuZXJyb3IoDQogICAgICAgICAgYOaWh+S7tuagvOW8j+S4jeato+ehriwg6K+35LiK5LygJHt0aGlzLmZpbGVUeXBlLmpvaW4oIi8iKX3lm77niYfmoLzlvI/mlofku7YhYA0KICAgICAgICApOw0KICAgICAgICByZXR1cm4gZmFsc2U7DQogICAgICB9DQogICAgICBpZiAodGhpcy5maWxlU2l6ZSkgew0KICAgICAgICBjb25zdCBpc0x0ID0gZmlsZS5zaXplIC8gMTAyNCAvIDEwMjQgPCB0aGlzLmZpbGVTaXplOw0KICAgICAgICBpZiAoIWlzTHQpIHsNCiAgICAgICAgICB0aGlzLiRtZXNzYWdlLmVycm9yKGDkuIrkvKDlpLTlg4/lm77niYflpKflsI/kuI3og73otoXov4cgJHt0aGlzLmZpbGVTaXplfSBNQiFgKTsNCiAgICAgICAgICByZXR1cm4gZmFsc2U7DQogICAgICAgIH0NCiAgICAgIH0NCiAgICAgIHRoaXMubG9hZGluZyA9IHRoaXMuJGxvYWRpbmcoew0KICAgICAgICBsb2NrOiB0cnVlLA0KICAgICAgICB0ZXh0OiAi5LiK5Lyg5LitIiwNCiAgICAgICAgYmFja2dyb3VuZDogInJnYmEoMCwgMCwgMCwgMC43KSIsDQogICAgICB9KTsNCiAgICB9LA0KICAgIC8vIOaWh+S7tuS4quaVsOi2heWHug0KICAgIGhhbmRsZUV4Y2VlZCgpIHsNCiAgICAgIHRoaXMuJG1lc3NhZ2UuZXJyb3IoYOS4iuS8oOaWh+S7tuaVsOmHj+S4jeiDvei2hei/hyAke3RoaXMubGltaXR9IOS4qiFgKTsNCiAgICB9LA0KICAgIC8vIOS4iuS8oOWksei0pQ0KICAgIGhhbmRsZVVwbG9hZEVycm9yKCkgew0KICAgICAgdGhpcy4kbWVzc2FnZSh7DQogICAgICAgIHR5cGU6ICJlcnJvciIsDQogICAgICAgIG1lc3NhZ2U6ICLkuIrkvKDlpLHotKUiLA0KICAgICAgfSk7DQogICAgICB0aGlzLmxvYWRpbmcuY2xvc2UoKTsNCiAgICB9LA0KICAgIC8vIOmihOiniA0KICAgIGhhbmRsZVBpY3R1cmVDYXJkUHJldmlldyhmaWxlKSB7DQogICAgICB0aGlzLmRpYWxvZ0ltYWdlVXJsID0gZmlsZS51cmw7DQogICAgICB0aGlzLmRpYWxvZ1Zpc2libGUgPSB0cnVlOw0KICAgIH0sDQogICAgLy8g5a+56LGh6L2s5oiQ5oyH5a6a5a2X56ym5Liy5YiG6ZqUDQogICAgbGlzdFRvU3RyaW5nKGxpc3QsIHNlcGFyYXRvcikgew0KICAgICAgbGV0IHN0cnMgPSAiIjsNCiAgICAgIHNlcGFyYXRvciA9IHNlcGFyYXRvciB8fCAiLCI7DQogICAgICBmb3IgKGxldCBpIGluIGxpc3QpIHsNCiAgICAgICAgc3RycyArPSBsaXN0W2ldLnVybC5yZXBsYWNlKHRoaXMuYmFzZVVybCwgIiIpICsgc2VwYXJhdG9yOw0KICAgICAgfQ0KICAgICAgcmV0dXJuIHN0cnMgIT0gJycgPyBzdHJzLnN1YnN0cigwLCBzdHJzLmxlbmd0aCAtIDEpIDogJyc7DQogICAgfQ0KICB9DQp9Ow0K"},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA;;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;;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","file":"index.vue","sourceRoot":"src/components/ImageUpload","sourcesContent":["<template>\r\n  <div class=\"component-upload-image\">\r\n    <el-upload\r\n      :action=\"uploadImgUrl\"\r\n      list-type=\"picture-card\"\r\n      :on-success=\"handleUploadSuccess\"\r\n      :before-upload=\"handleBeforeUpload\"\r\n      :limit=\"limit\"\r\n      :on-error=\"handleUploadError\"\r\n      :on-exceed=\"handleExceed\"\r\n      name=\"file\"\r\n      :on-remove=\"handleRemove\"\r\n      :show-file-list=\"true\"\r\n      :headers=\"headers\"\r\n      :file-list=\"fileList\"\r\n      :on-preview=\"handlePictureCardPreview\"\r\n      :class=\"{hide: this.fileList.length >= this.limit}\"\r\n    >\r\n      <i class=\"el-icon-plus\"></i>\r\n    </el-upload>\r\n    \r\n    <!-- 上传提示 -->\r\n    <div class=\"el-upload__tip\" slot=\"tip\" v-if=\"showTip\">\r\n      请上传\r\n      <template v-if=\"fileSize\"> 大小不超过 <b style=\"color: #f56c6c\">{{ fileSize }}MB</b> </template>\r\n      <template v-if=\"fileType\"> 格式为 <b style=\"color: #f56c6c\">{{ fileType.join(\"/\") }}</b> </template>\r\n      的文件\r\n    </div>\r\n\r\n    <el-dialog\r\n      :visible.sync=\"dialogVisible\"\r\n      title=\"预览\"\r\n      width=\"800\"\r\n      append-to-body\r\n    >\r\n      <img\r\n        :src=\"dialogImageUrl\"\r\n        style=\"display: block; max-width: 100%; margin: 0 auto\"\r\n      />\r\n    </el-dialog>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { getToken } from \"@/utils/auth\";\r\n\r\nexport default {\r\n  props: {\r\n    value: [String, Object, Array],\r\n    // 图片数量限制\r\n    limit: {\r\n      type: Number,\r\n      default: 5,\r\n    },\r\n    // 大小限制(MB)\r\n    fileSize: {\r\n       type: Number,\r\n      default: 5,\r\n    },\r\n    // 文件类型, 例如['png', 'jpg', 'jpeg']\r\n    fileType: {\r\n      type: Array,\r\n      default: () => [\"png\", \"jpg\", \"jpeg\"],\r\n    },\r\n    // 是否显示提示\r\n    isShowTip: {\r\n      type: Boolean,\r\n      default: true\r\n    }\r\n  },\r\n  data() {\r\n    return {\r\n      dialogImageUrl: \"\",\r\n      dialogVisible: false,\r\n      hideUpload: false,\r\n      baseUrl: process.env.VUE_APP_BASE_API,\r\n      uploadImgUrl: process.env.VUE_APP_BASE_API + \"/common/upload\", // 上传的图片服务器地址\r\n      headers: {\r\n        Authorization: \"Bearer \" + getToken(),\r\n      },\r\n      fileList: []\r\n    };\r\n  },\r\n  watch: {\r\n    value: {\r\n      handler(val) {\r\n        if (val) {\r\n          // 首先将值转为数组\r\n          const list = Array.isArray(val) ? val : this.value.split(',');\r\n          // 然后将数组转为对象数组\r\n          this.fileList = list.map(item => {\r\n            if (typeof item === \"string\") {\r\n              if (item.indexOf(this.baseUrl) === -1) {\r\n                  item = { name: this.baseUrl + item, url: this.baseUrl + item };\r\n              } else {\r\n                  item = { name: item, url: item };\r\n              }\r\n            }\r\n            return item;\r\n          });\r\n        } else {\r\n          this.fileList = [];\r\n          return [];\r\n        }\r\n      },\r\n      deep: true,\r\n      immediate: true\r\n    }\r\n  },\r\n  computed: {\r\n    // 是否显示提示\r\n    showTip() {\r\n      return this.isShowTip && (this.fileType || this.fileSize);\r\n    },\r\n  },\r\n  methods: {\r\n    // 删除图片\r\n    handleRemove(file, fileList) {\r\n      const findex = this.fileList.map(f => f.name).indexOf(file.name);\r\n      if(findex > -1) {\r\n        this.fileList.splice(findex, 1);\r\n        this.$emit(\"input\", this.listToString(this.fileList));\r\n      }\r\n    },\r\n    // 上传成功回调\r\n    handleUploadSuccess(res) {\r\n      this.fileList.push({ name: res.fileName, url: res.fileName });\r\n      this.$emit(\"input\", this.listToString(this.fileList));\r\n      this.loading.close();\r\n    },\r\n    // 上传前loading加载\r\n    handleBeforeUpload(file) {\r\n      let isImg = false;\r\n      if (this.fileType.length) {\r\n        let fileExtension = \"\";\r\n        if (file.name.lastIndexOf(\".\") > -1) {\r\n          fileExtension = file.name.slice(file.name.lastIndexOf(\".\") + 1);\r\n        }\r\n        isImg = this.fileType.some(type => {\r\n          if (file.type.indexOf(type) > -1) return true;\r\n          if (fileExtension && fileExtension.indexOf(type) > -1) return true;\r\n          return false;\r\n        });\r\n      } else {\r\n        isImg = file.type.indexOf(\"image\") > -1;\r\n      }\r\n\r\n      if (!isImg) {\r\n        this.$message.error(\r\n          `文件格式不正确, 请上传${this.fileType.join(\"/\")}图片格式文件!`\r\n        );\r\n        return false;\r\n      }\r\n      if (this.fileSize) {\r\n        const isLt = file.size / 1024 / 1024 < this.fileSize;\r\n        if (!isLt) {\r\n          this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} MB!`);\r\n          return false;\r\n        }\r\n      }\r\n      this.loading = this.$loading({\r\n        lock: true,\r\n        text: \"上传中\",\r\n        background: \"rgba(0, 0, 0, 0.7)\",\r\n      });\r\n    },\r\n    // 文件个数超出\r\n    handleExceed() {\r\n      this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);\r\n    },\r\n    // 上传失败\r\n    handleUploadError() {\r\n      this.$message({\r\n        type: \"error\",\r\n        message: \"上传失败\",\r\n      });\r\n      this.loading.close();\r\n    },\r\n    // 预览\r\n    handlePictureCardPreview(file) {\r\n      this.dialogImageUrl = file.url;\r\n      this.dialogVisible = true;\r\n    },\r\n    // 对象转成指定字符串分隔\r\n    listToString(list, separator) {\r\n      let strs = \"\";\r\n      separator = separator || \",\";\r\n      for (let i in list) {\r\n        strs += list[i].url.replace(this.baseUrl, \"\") + separator;\r\n      }\r\n      return strs != '' ? strs.substr(0, strs.length - 1) : '';\r\n    }\r\n  }\r\n};\r\n</script>\r\n<style scoped lang=\"scss\">\r\n// .el-upload--picture-card 控制加号部分\r\n::v-deep.hide .el-upload--picture-card {\r\n    display: none;\r\n}\r\n// 去掉动画效果\r\n::v-deep .el-list-enter-active,\r\n::v-deep .el-list-leave-active {\r\n    transition: all 0s;\r\n}\r\n\r\n::v-deep .el-list-enter, .el-list-leave-active {\r\n    opacity: 0;\r\n    transform: translateY(0);\r\n}\r\n</style>\r\n\r\n"]}]}