{"remainingRequest":"C:\\Users\\Administrator\\Desktop\\最新\\supervision-ui\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Administrator\\Desktop\\最新\\supervision-ui\\src\\components\\FileUpload\\index.vue?vue&type=script&lang=js&","dependencies":[{"path":"C:\\Users\\Administrator\\Desktop\\最新\\supervision-ui\\src\\components\\FileUpload\\index.vue","mtime":1647228900590},{"path":"C:\\Users\\Administrator\\Desktop\\最新\\supervision-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\最新\\supervision-ui\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"C:\\Users\\Administrator\\Desktop\\最新\\supervision-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\最新\\supervision-ui\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KDQppbXBvcnQgeyBnZXRUb2tlbiB9IGZyb20gIkAvdXRpbHMvYXV0aCI7DQoNCmV4cG9ydCBkZWZhdWx0IHsNCiAgbmFtZTogIkZpbGVVcGxvYWQiLA0KICBwcm9wczogew0KICAgIC8vIOWAvA0KICAgIHZhbHVlOiBbU3RyaW5nLCBPYmplY3QsIEFycmF5XSwNCiAgICAvLyDmlbDph4/pmZDliLYNCiAgICBsaW1pdDogew0KICAgICAgdHlwZTogTnVtYmVyLA0KICAgICAgZGVmYXVsdDogNSwNCiAgICB9LA0KICAgIC8vIOWkp+Wwj+mZkOWItihNQikNCiAgICBmaWxlU2l6ZTogew0KICAgICAgdHlwZTogTnVtYmVyLA0KICAgICAgZGVmYXVsdDogNSwNCiAgICB9LA0KICAgIC8vIOaWh+S7tuexu+Weiywg5L6L5aaCWydwbmcnLCAnanBnJywgJ2pwZWcnXQ0KICAgIGZpbGVUeXBlOiB7DQogICAgICB0eXBlOiBBcnJheSwNCiAgICAgIGRlZmF1bHQ6ICgpID0+IFsiZG9jIiwgInhscyIsICJwcHQiLCAidHh0IiwgInBkZiJdLA0KICAgIH0sDQogICAgLy8g5piv5ZCm5pi+56S65o+Q56S6DQogICAgaXNTaG93VGlwOiB7DQogICAgICB0eXBlOiBCb29sZWFuLA0KICAgICAgZGVmYXVsdDogdHJ1ZQ0KICAgIH0NCiAgfSwNCiAgZGF0YSgpIHsNCiAgICByZXR1cm4gew0KICAgICAgYmFzZVVybDogcHJvY2Vzcy5lbnYuVlVFX0FQUF9CQVNFX0FQSSwNCiAgICAgIHVwbG9hZEZpbGVVcmw6IHByb2Nlc3MuZW52LlZVRV9BUFBfQkFTRV9BUEkgKyAiL2NvbW1vbi91cGxvYWQiLCAvLyDkuIrkvKDnmoTlm77niYfmnI3liqHlmajlnLDlnYANCiAgICAgIGhlYWRlcnM6IHsNCiAgICAgICAgQXV0aG9yaXphdGlvbjogIkJlYXJlciAiICsgZ2V0VG9rZW4oKSwNCiAgICAgIH0sDQogICAgICBmaWxlTGlzdDogW10sDQogICAgfTsNCiAgfSwNCiAgd2F0Y2g6IHsNCiAgICB2YWx1ZTogew0KICAgICAgaGFuZGxlcih2YWwpIHsNCiAgICAgICAgaWYgKHZhbCkgew0KICAgICAgICAgIGxldCB0ZW1wID0gMTsNCiAgICAgICAgICAvLyDpppblhYjlsIblgLzovazkuLrmlbDnu4QNCiAgICAgICAgICBjb25zdCBsaXN0ID0gQXJyYXkuaXNBcnJheSh2YWwpID8gdmFsIDogdGhpcy52YWx1ZS5zcGxpdCgnLCcpOw0KICAgICAgICAgIC8vIOeEtuWQjuWwhuaVsOe7hOi9rOS4uuWvueixoeaVsOe7hA0KICAgICAgICAgIHRoaXMuZmlsZUxpc3QgPSBsaXN0Lm1hcChpdGVtID0+IHsNCiAgICAgICAgICAgIGlmICh0eXBlb2YgaXRlbSA9PT0gInN0cmluZyIpIHsNCiAgICAgICAgICAgICAgaXRlbSA9IHsgbmFtZTogaXRlbSwgdXJsOiBpdGVtIH07DQogICAgICAgICAgICB9DQogICAgICAgICAgICBpdGVtLnVpZCA9IGl0ZW0udWlkIHx8IG5ldyBEYXRlKCkuZ2V0VGltZSgpICsgdGVtcCsrOw0KICAgICAgICAgICAgcmV0dXJuIGl0ZW07DQogICAgICAgICAgfSk7DQogICAgICAgIH0gZWxzZSB7DQogICAgICAgICAgdGhpcy5maWxlTGlzdCA9IFtdOw0KICAgICAgICAgIHJldHVybiBbXTsNCiAgICAgICAgfQ0KICAgICAgfSwNCiAgICAgIGRlZXA6IHRydWUsDQogICAgICBpbW1lZGlhdGU6IHRydWUNCiAgICB9DQogIH0sDQogIGNvbXB1dGVkOiB7DQogICAgLy8g5piv5ZCm5pi+56S65o+Q56S6DQogICAgc2hvd1RpcCgpIHsNCiAgICAgIHJldHVybiB0aGlzLmlzU2hvd1RpcCAmJiAodGhpcy5maWxlVHlwZSB8fCB0aGlzLmZpbGVTaXplKTsNCiAgICB9LA0KICB9LA0KICBtZXRob2RzOiB7DQogICAgLy8g5LiK5Lyg5YmN5qCh5qOA5qC85byP5ZKM5aSn5bCPDQogICAgaGFuZGxlQmVmb3JlVXBsb2FkKGZpbGUpIHsNCiAgICAgIC8vIOagoeajgOaWh+S7tuexu+Weiw0KICAgICAgaWYgKHRoaXMuZmlsZVR5cGUpIHsNCiAgICAgICAgbGV0IGZpbGVFeHRlbnNpb24gPSAiIjsNCiAgICAgICAgaWYgKGZpbGUubmFtZS5sYXN0SW5kZXhPZigiLiIpID4gLTEpIHsNCiAgICAgICAgICBmaWxlRXh0ZW5zaW9uID0gZmlsZS5uYW1lLnNsaWNlKGZpbGUubmFtZS5sYXN0SW5kZXhPZigiLiIpICsgMSk7DQogICAgICAgIH0NCiAgICAgICAgY29uc3QgaXNUeXBlT2sgPSB0aGlzLmZpbGVUeXBlLnNvbWUoKHR5cGUpID0+IHsNCiAgICAgICAgICBpZiAoZmlsZS50eXBlLmluZGV4T2YodHlwZSkgPiAtMSkgcmV0dXJuIHRydWU7DQogICAgICAgICAgaWYgKGZpbGVFeHRlbnNpb24gJiYgZmlsZUV4dGVuc2lvbi5pbmRleE9mKHR5cGUpID4gLTEpIHJldHVybiB0cnVlOw0KICAgICAgICAgIHJldHVybiBmYWxzZTsNCiAgICAgICAgfSk7DQogICAgICAgIGlmICghaXNUeXBlT2spIHsNCiAgICAgICAgICB0aGlzLiRtZXNzYWdlLmVycm9yKGDmlofku7bmoLzlvI/kuI3mraPnoa4sIOivt+S4iuS8oCR7dGhpcy5maWxlVHlwZS5qb2luKCIvIil95qC85byP5paH5Lu2IWApOw0KICAgICAgICAgIHJldHVybiBmYWxzZTsNCiAgICAgICAgfQ0KICAgICAgfQ0KICAgICAgLy8g5qCh5qOA5paH5Lu25aSn5bCPDQogICAgICBpZiAodGhpcy5maWxlU2l6ZSkgew0KICAgICAgICBjb25zdCBpc0x0ID0gZmlsZS5zaXplIC8gMTAyNCAvIDEwMjQgPCB0aGlzLmZpbGVTaXplOw0KICAgICAgICBpZiAoIWlzTHQpIHsNCiAgICAgICAgICB0aGlzLiRtZXNzYWdlLmVycm9yKGDkuIrkvKDmlofku7blpKflsI/kuI3og73otoXov4cgJHt0aGlzLmZpbGVTaXplfSBNQiFgKTsNCiAgICAgICAgICByZXR1cm4gZmFsc2U7DQogICAgICAgIH0NCiAgICAgIH0NCiAgICAgIHJldHVybiB0cnVlOw0KICAgIH0sDQogICAgLy8g5paH5Lu25Liq5pWw6LaF5Ye6DQogICAgaGFuZGxlRXhjZWVkKCkgew0KICAgICAgdGhpcy4kbWVzc2FnZS5lcnJvcihg5LiK5Lyg5paH5Lu25pWw6YeP5LiN6IO96LaF6L+HICR7dGhpcy5saW1pdH0g5LiqIWApOw0KICAgIH0sDQogICAgLy8g5LiK5Lyg5aSx6LSlDQogICAgaGFuZGxlVXBsb2FkRXJyb3IoZXJyKSB7DQogICAgICB0aGlzLiRtZXNzYWdlLmVycm9yKCLkuIrkvKDlpLHotKUsIOivt+mHjeivlSIpOw0KICAgIH0sDQogICAgLy8g5LiK5Lyg5oiQ5Yqf5Zue6LCDDQogICAgaGFuZGxlVXBsb2FkU3VjY2VzcyhyZXMsIGZpbGUpIHsNCiAgICAgIHRoaXMuJG1lc3NhZ2Uuc3VjY2Vzcygi5LiK5Lyg5oiQ5YqfIik7DQogICAgICB0aGlzLmZpbGVMaXN0LnB1c2goeyBuYW1lOiByZXMuZmlsZU5hbWUsIHVybDogcmVzLmZpbGVOYW1lIH0pOw0KICAgICAgdGhpcy4kZW1pdCgiaW5wdXQiLCB0aGlzLmxpc3RUb1N0cmluZyh0aGlzLmZpbGVMaXN0KSk7DQogICAgfSwNCiAgICAvLyDliKDpmaTmlofku7YNCiAgICBoYW5kbGVEZWxldGUoaW5kZXgpIHsNCiAgICAgIHRoaXMuZmlsZUxpc3Quc3BsaWNlKGluZGV4LCAxKTsNCiAgICAgIHRoaXMuJGVtaXQoImlucHV0IiwgdGhpcy5saXN0VG9TdHJpbmcodGhpcy5maWxlTGlzdCkpOw0KICAgIH0sDQogICAgLy8g6I635Y+W5paH5Lu25ZCN56ewDQogICAgZ2V0RmlsZU5hbWUobmFtZSkgew0KICAgICAgaWYgKG5hbWUubGFzdEluZGV4T2YoIi8iKSA+IC0xKSB7DQogICAgICAgIHJldHVybiBuYW1lLnNsaWNlKG5hbWUubGFzdEluZGV4T2YoIi8iKSArIDEpLnRvTG93ZXJDYXNlKCk7DQogICAgICB9IGVsc2Ugew0KICAgICAgICByZXR1cm4gIiI7DQogICAgICB9DQogICAgfSwNCiAgICAvLyDlr7nosaHovazmiJDmjIflrprlrZfnrKbkuLLliIbpmpQNCiAgICBsaXN0VG9TdHJpbmcobGlzdCwgc2VwYXJhdG9yKSB7DQogICAgICBsZXQgc3RycyA9ICIiOw0KICAgICAgc2VwYXJhdG9yID0gc2VwYXJhdG9yIHx8ICIsIjsNCiAgICAgIGZvciAobGV0IGkgaW4gbGlzdCkgew0KICAgICAgICBzdHJzICs9IGxpc3RbaV0udXJsICsgc2VwYXJhdG9yOw0KICAgICAgfQ0KICAgICAgcmV0dXJuIHN0cnMgIT0gJycgPyBzdHJzLnN1YnN0cigwLCBzdHJzLmxlbmd0aCAtIDEpIDogJyc7DQogICAgfQ0KICB9DQp9Ow0K"},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA;;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","file":"index.vue","sourceRoot":"src/components/FileUpload","sourcesContent":["<template>\r\n  <div class=\"upload-file\">\r\n    <el-upload\r\n      :action=\"uploadFileUrl\"\r\n      :before-upload=\"handleBeforeUpload\"\r\n      :file-list=\"fileList\"\r\n      :limit=\"limit\"\r\n      :on-error=\"handleUploadError\"\r\n      :on-exceed=\"handleExceed\"\r\n      :on-success=\"handleUploadSuccess\"\r\n      :show-file-list=\"false\"\r\n      :headers=\"headers\"\r\n      class=\"upload-file-uploader\"\r\n      ref=\"upload\"\r\n    >\r\n      <!-- 上传按钮 -->\r\n      <el-button size=\"mini\" type=\"primary\" class=\"select_file\">选取文件</el-button>\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: #13CE66 \">{{ fileSize }}MB</b> </template>\r\n        <template v-if=\"fileType\"> 格式为 <b style=\"color: #13CE66\">{{ fileType.join(\"/\") }}</b> </template>\r\n        的文件\r\n      </div>\r\n    </el-upload>\r\n\r\n    <!-- 文件列表 -->\r\n    <transition-group class=\"upload-file-list el-upload-list el-upload-list--text\" name=\"el-fade-in-linear\" tag=\"ul\">\r\n      <li :key=\"file.uid\" class=\"el-upload-list__item ele-upload-list__item-content\" v-for=\"(file, index) in fileList\">\r\n        <el-link :href=\"`${baseUrl}${file.url}`\" :underline=\"false\" target=\"_blank\">\r\n          <span class=\"el-icon-document\"> {{ getFileName(file.name) }} </span>\r\n        </el-link>\r\n        <div class=\"ele-upload-list__item-content-action\">\r\n          <el-link :underline=\"false\" @click=\"handleDelete(index)\" type=\"danger\" class=\"del\"></el-link>\r\n        </div>\r\n      </li>\r\n    </transition-group>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { getToken } from \"@/utils/auth\";\r\n\r\nexport default {\r\n  name: \"FileUpload\",\r\n  props: {\r\n    // 值\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: () => [\"doc\", \"xls\", \"ppt\", \"txt\", \"pdf\"],\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      baseUrl: process.env.VUE_APP_BASE_API,\r\n      uploadFileUrl: 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          let temp = 1;\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              item = { name: item, url: item };\r\n            }\r\n            item.uid = item.uid || new Date().getTime() + temp++;\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    handleBeforeUpload(file) {\r\n      // 校检文件类型\r\n      if (this.fileType) {\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        const isTypeOk = 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        if (!isTypeOk) {\r\n          this.$message.error(`文件格式不正确, 请上传${this.fileType.join(\"/\")}格式文件!`);\r\n          return false;\r\n        }\r\n      }\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      return true;\r\n    },\r\n    // 文件个数超出\r\n    handleExceed() {\r\n      this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);\r\n    },\r\n    // 上传失败\r\n    handleUploadError(err) {\r\n      this.$message.error(\"上传失败, 请重试\");\r\n    },\r\n    // 上传成功回调\r\n    handleUploadSuccess(res, file) {\r\n      this.$message.success(\"上传成功\");\r\n      this.fileList.push({ name: res.fileName, url: res.fileName });\r\n      this.$emit(\"input\", this.listToString(this.fileList));\r\n    },\r\n    // 删除文件\r\n    handleDelete(index) {\r\n      this.fileList.splice(index, 1);\r\n      this.$emit(\"input\", this.listToString(this.fileList));\r\n    },\r\n    // 获取文件名称\r\n    getFileName(name) {\r\n      if (name.lastIndexOf(\"/\") > -1) {\r\n        return name.slice(name.lastIndexOf(\"/\") + 1).toLowerCase();\r\n      } else {\r\n        return \"\";\r\n      }\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 + separator;\r\n      }\r\n      return strs != '' ? strs.substr(0, strs.length - 1) : '';\r\n    }\r\n  }\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.upload-file-uploader {\r\n  margin-bottom: 5px;\r\n}\r\n.upload-file-list .el-upload-list__item {\r\n  border: 1px solid #e4e7ed;\r\n  line-height: 2;\r\n  margin-bottom: 10px;\r\n  position: relative;\r\n  display: flex;\r\n}\r\n.upload-file-list .ele-upload-list__item-content {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  color: inherit;\r\n}\r\n.ele-upload-list__item-content-action .el-link {\r\n  margin-right: 10px;\r\n}\r\n// 选取文件\r\n.select_file{\r\n  width: 70px;\r\n  height: 30px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n.el-upload__tip{\r\n  margin-left: -15px;\r\n}\r\n// 删除\r\n.del{\r\n  width: 23px;\r\n  height: 23px;\r\n  left: 40px;\r\n  background-image: url(\"../../images/delicon.png\");\r\n  background-repeat: no-repeat;\r\n  background-color: #FF4949;\r\n  background-position: center;\r\n  margin-bottom: 2px;\r\n  margin-left: -5px;\r\n}\r\n</style>"]}]}