k94314517
2024-10-16 17efddc6a667670dca682bf36b51a43e99615e6d
admin/src/components/common/UploadFaceImg.vue
@@ -19,13 +19,14 @@
        :close-on-click-modal="false"
        title="上传图片"
        :visible.sync="updateImg"
        width="800px"
        width="1000px"
        class="icon-dialog-wrapper dialong-com-style">
      <ImageCropper ref="iconShot" v-if="updateImg" :imgSrc="img" >
      </ImageCropper>
      <span slot="footer" class="dialog-footer">
            <el-button @click="updateImg = false">取 消</el-button>
            <el-button type="primary" @click="uploadIcon">确 定</el-button>
            <el-button v-if="loading">取 消</el-button>
            <el-button v-else @click="updateImg = false">取 消</el-button>
            <el-button :loading="loading" type="primary" @click="uploadIcon">确 定</el-button>
          </span>
    </el-dialog>
  </div>
@@ -50,6 +51,7 @@
  },
  data () {
    return {
      loading: false,
      fileInfo:{},
      img: null,
      updateImg: false,
@@ -75,7 +77,9 @@
                { type: this.fileInfo.type } // 设置File类型的文件类型
            )
        )
        this.loading = true
        upload(formData).then(res => {
          this.loading = false
          console.log(res)
          this.file.imgurl = res.imgaddr
          this.file.imgurlfull = res.url
@@ -84,6 +88,8 @@
          this.updateImg = false
          this.$emit('uploadSuccess', { imgurl: res.imgaddr, imgurlfull: res.url, name: res.originname })
          this.$emit('uploadEnd')
        }, () => {
          this.loading = false
        })
      })
    },
@@ -91,13 +97,13 @@
    // 上传图片
    openUpdateIcon (file, fileList) {
      const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        this.$message.error('上传头像图片大小不能超过 5MB!')
        return false
      }
      // 上传成功后将图片地址赋值给裁剪框显示图片