H5静态化

doum

2025-09-26 9057e04efad1b7d61c77a72e5c37a504d0aee935

 admin/src/components/common/UploadImage.vue

对比新文件
@@ -0,0 +1,153 @@
<template>
  <div>
    <el-upload
      :action="uploadImgUrl"
      :data="uploadData"
      list-type="picture-card"
      :file-list="fileList"
      accept=".jpg,.png"
      :before-upload="beforeUpload"
      :on-success="uploadSuccess"
      :on-error="fail"
    >
      <i class="el-icon-plus icon"></i>
      <div slot="file" slot-scope="{file}">
        <img
          class="el-upload-list__item-thumbnail"
          :src="file.url" alt=""
          style="width: 100px;height: 100px;"
        >
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <span
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :initialIndex="tempIndex"
      :url-list="srcList"
      :z-index="3000"
    />
  </div>

</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  components: {
    ElImageViewer
  },
  props: {
    fileList: {
      type: Array,
      default: () => []
    },
    uploadData: Object,
  },
  data() {
    return {
      uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/web/public/uploadLocal',
      realList: [],
      srcList: [],
      tempIndex: 0,
      showViewer: false,
    }
  },
  watch: {
    fileList: {
      handler(val) {
        console.log(val);
        if (val.length==0) {
          this.realList = []
          this.srcList = []
        }
      }

    }
  },
  methods: {
    beforeUpload(file) {
      this.$emit('beginUpload')
      return true
    },
     // 涓婁紶鍥剧墖鎴愬姛
     uploadSuccess (res, file, fileList) {
      // console.log('this.fileList', this.fileList);
      // console.log('fileList', fileList);
      this.$emit('uploadEnd')
      this.realList = fileList
      this.srcList.push(res.data.url)
      // console.log('file', file);
      if (res.code === 200) {
        this.fileList.push(
          {
            fileurl: res.data.imgaddr,
            name: res.data.originname,
            url: res.data.url
          }
        )
      } else {
        this.$message.error(res.msg || '涓婁紶澶辫触')
      }
    },
    fail (err, file, fileList) {
      this.$emit('uploadEnd')
      this.$message.error('涓婁紶澶辫触')
    },
    handlePictureCardPreview(file) {
      // this.tempIndex = this.srcList.findIndex(item => item == file.response.data.url )
      // console.log(file);
      this.tempIndex = this.fileList.findIndex(item => item.url == file.url )
      // console.log( this.tempIndex);
      this.srcList = this.fileList.map(item => item.url)
      this.showViewer = true
    },
    closeViewer() {
      this.showViewer = false
    },
    handleRemove(file) {
      console.log(this.fileList);
      let tempIndex = this.realList.findIndex(item => item.url === file.url)
      // debugger
      this.realList.splice(tempIndex, 1)
      this.fileList.splice(tempIndex, 1)
      this.srcList.splice(tempIndex, 1)

    }
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-upload--picture-card{
  width: 90px !important;
  height: 90px !important;
}
::v-deep .el-upload-list__item {
  width: 90px !important;
  height: 90px !important;
}
.icon {
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(0%, -85%);
}
::v-deep .el-upload-list__item {
  width: 90px !important;
  height: 90px !important;
}
</style>