haoxuan
2024-04-17 1888b426ff2b6a529f5fdef0f0453dadef71824b
src/views/productManage/product/IconCropper.vue
@@ -2,7 +2,7 @@
  <div class="cropper-wrapper">
    <div v-if="isView">
      <el-image :src="imageUrl" class="view-image">
        <div slot="error" class="image-slot">
        <div slot="error" class="image-slot no-cursor">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>
@@ -123,19 +123,34 @@
        infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      },
      // 防止重复提交
      loading: false
      loading: false,
      fileName: ""
    }
  },
  computed: {
    myIsView() {
      return this.isView
    }
  },
  watch: {
    myIsView() {
      this.setImgMethods()
    }
  },
  mounted() {
    console.log(this.imageUrl)
    if (!this.isView && this.imageUrl?.length > 0) {
      this.isPreview = true
      this.previewImg = this.imageUrl
    } else {
      this.isPreview = false
    }
    this.setImgMethods()
  },
  methods: {
    // 设置上传/更换图片显示方法
    setImgMethods() {
      if (!this.isView && this.imageUrl?.length > 0) {
        this.isPreview = true
        this.previewImg = this.imageUrl
      } else {
        this.isPreview = false
      }
    },
    // 上传按钮 限制图片大小和类型
    handleChangeUpload(file, fileList) {
      const isJPG = file.raw.type === "image/jpeg" || file.raw.type === "image/png"
@@ -149,6 +164,7 @@
        return false
      }
      console.log(file, fileList)
      this.fileName = file.name
      // 上传成功后将图片地址赋值给裁剪框显示图片
      this.$nextTick(async () => {
        // base64方式
@@ -205,8 +221,12 @@
        this.dialogVisible = false
        this.previewImg = URL.createObjectURL(blob)
        this.isPreview = true
        console.log(blob)
        this.$emit("getImageData", blob)
        // blob转file
        let file = new File([blob], this.fileName, { type: blob.type })
        // file转formData
        let formData = new FormData()
        formData.append("files", file)
        this.$emit("getImageData", formData)
      })
      // 获取截图的 base64 数据
      // this.$refs.cropper.getCropData(data => {