{"remainingRequest":"/Users/kang/Gitea/vue-element-admin/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/kang/Gitea/vue-element-admin/src/components/Upload/SingleImage3.vue?vue&type=script&lang=js","dependencies":[{"path":"/Users/kang/Gitea/vue-element-admin/src/components/Upload/SingleImage3.vue","mtime":1754409279864},{"path":"/Users/kang/Gitea/vue-element-admin/node_modules/cache-loader/dist/cjs.js","mtime":1754409278035},{"path":"/Users/kang/Gitea/vue-element-admin/node_modules/babel-loader/lib/index.js","mtime":1754409277911},{"path":"/Users/kang/Gitea/vue-element-admin/node_modules/cache-loader/dist/cjs.js","mtime":1754409278035},{"path":"/Users/kang/Gitea/vue-element-admin/node_modules/vue-loader/lib/index.js","mtime":1754409279720}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KCmltcG9ydCB7IGdldFRva2VuIH0gZnJvbSAnQC9hcGkvcWluaXUnCgpleHBvcnQgZGVmYXVsdCB7CiAgbmFtZTogJ1NpbmdsZUltYWdlVXBsb2FkMycsCiAgcHJvcHM6IHsKICAgIHZhbHVlOiB7CiAgICAgIHR5cGU6IFN0cmluZywKICAgICAgZGVmYXVsdDogJycKICAgIH0KICB9LAogIGRhdGEoKSB7CiAgICByZXR1cm4gewogICAgICB0ZW1wVXJsOiAnJywKICAgICAgZGF0YU9iajogeyB0b2tlbjogJycsIGtleTogJycgfQogICAgfQogIH0sCiAgY29tcHV0ZWQ6IHsKICAgIGltYWdlVXJsKCkgewogICAgICByZXR1cm4gdGhpcy52YWx1ZQogICAgfQogIH0sCiAgbWV0aG9kczogewogICAgcm1JbWFnZSgpIHsKICAgICAgdGhpcy5lbWl0SW5wdXQoJycpCiAgICB9LAogICAgZW1pdElucHV0KHZhbCkgewogICAgICB0aGlzLiRlbWl0KCdpbnB1dCcsIHZhbCkKICAgIH0sCiAgICBoYW5kbGVJbWFnZVN1Y2Nlc3MoZmlsZSkgewogICAgICB0aGlzLmVtaXRJbnB1dChmaWxlLmZpbGVzLmZpbGUpCiAgICB9LAogICAgYmVmb3JlVXBsb2FkKCkgewogICAgICBjb25zdCBfc2VsZiA9IHRoaXMKICAgICAgcmV0dXJuIG5ldyBQcm9taXNlKChyZXNvbHZlLCByZWplY3QpID0+IHsKICAgICAgICBnZXRUb2tlbigpLnRoZW4ocmVzcG9uc2UgPT4gewogICAgICAgICAgY29uc3Qga2V5ID0gcmVzcG9uc2UuZGF0YS5xaW5pdV9rZXkKICAgICAgICAgIGNvbnN0IHRva2VuID0gcmVzcG9uc2UuZGF0YS5xaW5pdV90b2tlbgogICAgICAgICAgX3NlbGYuX2RhdGEuZGF0YU9iai50b2tlbiA9IHRva2VuCiAgICAgICAgICBfc2VsZi5fZGF0YS5kYXRhT2JqLmtleSA9IGtleQogICAgICAgICAgdGhpcy50ZW1wVXJsID0gcmVzcG9uc2UuZGF0YS5xaW5pdV91cmwKICAgICAgICAgIHJlc29sdmUodHJ1ZSkKICAgICAgICB9KS5jYXRjaChlcnIgPT4gewogICAgICAgICAgY29uc29sZS5sb2coZXJyKQogICAgICAgICAgcmVqZWN0KGZhbHNlKQogICAgICAgIH0pCiAgICAgIH0pCiAgICB9CiAgfQp9Cg=="},{"version":3,"sources":["SingleImage3.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA;;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":"SingleImage3.vue","sourceRoot":"src/components/Upload","sourcesContent":["<template>\n  <div class=\"upload-container\">\n    <el-upload\n      :data=\"dataObj\"\n      :multiple=\"false\"\n      :show-file-list=\"false\"\n      :on-success=\"handleImageSuccess\"\n      class=\"image-uploader\"\n      drag\n      action=\"https://httpbin.org/post\"\n    >\n      <i class=\"el-icon-upload\" />\n      <div class=\"el-upload__text\">\n        将文件拖到此处，或<em>点击上传</em>\n      </div>\n    </el-upload>\n    <div class=\"image-preview image-app-preview\">\n      <div v-show=\"imageUrl.length>1\" class=\"image-preview-wrapper\">\n        <img :src=\"imageUrl\">\n        <div class=\"image-preview-action\">\n          <i class=\"el-icon-delete\" @click=\"rmImage\" />\n        </div>\n      </div>\n    </div>\n    <div class=\"image-preview\">\n      <div v-show=\"imageUrl.length>1\" class=\"image-preview-wrapper\">\n        <img :src=\"imageUrl\">\n        <div class=\"image-preview-action\">\n          <i class=\"el-icon-delete\" @click=\"rmImage\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { getToken } from '@/api/qiniu'\n\nexport default {\n  name: 'SingleImageUpload3',\n  props: {\n    value: {\n      type: String,\n      default: ''\n    }\n  },\n  data() {\n    return {\n      tempUrl: '',\n      dataObj: { token: '', key: '' }\n    }\n  },\n  computed: {\n    imageUrl() {\n      return this.value\n    }\n  },\n  methods: {\n    rmImage() {\n      this.emitInput('')\n    },\n    emitInput(val) {\n      this.$emit('input', val)\n    },\n    handleImageSuccess(file) {\n      this.emitInput(file.files.file)\n    },\n    beforeUpload() {\n      const _self = this\n      return new Promise((resolve, reject) => {\n        getToken().then(response => {\n          const key = response.data.qiniu_key\n          const token = response.data.qiniu_token\n          _self._data.dataObj.token = token\n          _self._data.dataObj.key = key\n          this.tempUrl = response.data.qiniu_url\n          resolve(true)\n        }).catch(err => {\n          console.log(err)\n          reject(false)\n        })\n      })\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import \"~@/styles/mixin.scss\";\n.upload-container {\n  width: 100%;\n  position: relative;\n  @include clearfix;\n  .image-uploader {\n    width: 35%;\n    float: left;\n  }\n  .image-preview {\n    width: 200px;\n    height: 200px;\n    position: relative;\n    border: 1px dashed #d9d9d9;\n    float: left;\n    margin-left: 50px;\n    .image-preview-wrapper {\n      position: relative;\n      width: 100%;\n      height: 100%;\n      img {\n        width: 100%;\n        height: 100%;\n      }\n    }\n    .image-preview-action {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      left: 0;\n      top: 0;\n      cursor: default;\n      text-align: center;\n      color: #fff;\n      opacity: 0;\n      font-size: 20px;\n      background-color: rgba(0, 0, 0, .5);\n      transition: opacity .3s;\n      cursor: pointer;\n      text-align: center;\n      line-height: 200px;\n      .el-icon-delete {\n        font-size: 36px;\n      }\n    }\n    &:hover {\n      .image-preview-action {\n        opacity: 1;\n      }\n    }\n  }\n  .image-app-preview {\n    width: 320px;\n    height: 180px;\n    position: relative;\n    border: 1px dashed #d9d9d9;\n    float: left;\n    margin-left: 50px;\n    .app-fake-conver {\n      height: 44px;\n      position: absolute;\n      width: 100%; // background: rgba(0, 0, 0, .1);\n      text-align: center;\n      line-height: 64px;\n      color: #fff;\n    }\n  }\n}\n</style>\n"]}]}