Merge branch 'master' of http://139.186.142.91:10010/r/productDev/zbom_dian...

MrShi

2026-01-29 8676f4cb37ef31fa9fcfe2a7faf5f4c4ea77cc1a

 admin/src/components/common/UploadImage.vue

@@ -8,30 +8,11 @@
      accept=".jpg,.png"
      :before-upload="beforeUpload"
      :on-success="uploadSuccess"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :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"
@@ -55,79 +36,77 @@
      type: Array,
      default: () => []
    },
    uploadData: Object,
    maxNum: {
      type: Number,
      default: () => null
    },
    uploadData: Object
  },
  data() {
    return {
      uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/web/public/uploadLocal',
      uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/upload',
      realList: [],
      srcList: [],
      // srcList: [],
      tempIndex: 0,
      showViewer: false,
      showViewer: false
    }
  },
  computed:{
    srcList(){
      return this.fileList.map(item => { return item.url })
    }
  },
  watch: {
    fileList: {
      handler(val) {
        console.log(val);
        if (val.length==0) {
          this.realList = []
          this.srcList = []
        }
      }

    }
  },
  methods: {
    handlePreview(file) {
      // console.log('预览文件：', file,this.fileList);
      this.tempIndex = this.srcList.findIndex(item => item == file.url)
      this.showViewer = true
    },
    beforeUpload(file) {
      this.$emit('beginUpload')
      const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 1; // 500kb
      if (!isJPGOrPNG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 500KB!');
        return false
      }
      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);
      this.$emit('endUpload')
      console.log('上传成功1：',fileList);
      if (res.code === 200) {
        this.fileList.push(
          {
        this.fileList.push({
            fileurl: res.data.imgaddr,
            name: res.data.originname,
            url: res.data.url
          }
        )
        })
        console.log('上传成功2：', this.fileList);
      } else {
        this.$message.error(res.msg || '上传失败')
      }
    },
    fail (err, file, fileList) {
      this.$emit('uploadEnd')
      this.$emit('endUpload')
      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)
      const tempIndex = this.fileList.findIndex(item => item.url === file.url)
      if(tempIndex >= 0){
      this.fileList.splice(tempIndex, 1)
      this.srcList.splice(tempIndex, 1)

    }
  },
    }
  }
}
</script>

@@ -150,4 +129,3 @@
  height: 90px !important;
}
</style>