doum
9 天以前 bc09bc87234065abe7130b84c92f81f143f5f3e7
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 ref="iconShot" v-if="updateImg" :imgSrc="img"  :auto-crop="autoCrop">
      </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>
@@ -41,7 +42,17 @@
      type: Object,
      default: () => {}
    },
    tipsLabel: '',
    autoCrop: {
      type: Object,
      default () {
        return { width: 500, height: 500 }
      }
    },
    // eslint-disable-next-line vue/require-prop-type-constructor
    tipsLabel: {
      type: String,
      default: ''
    },
    customStyle: {
      type: String,
      default: 'width: 90px; height: 90px;'
@@ -50,7 +61,8 @@
  },
  data () {
    return {
      fileInfo:{},
      loading: false,
      fileInfo: {},
      img: null,
      updateImg: false,
      imageSrc: null,
@@ -66,16 +78,21 @@
        console.log(fileData)
        const formData = new FormData()
        formData.append('folder', 'member')
        formData.append('folder', this.uploadData.folder || 'member')
        if (this.uploadData.isFace || this.uploadData.isFace == 0) {
          formData.append('isFace', 0)
        }
        formData.append(
            'file',
            new File(
                [fileData], // 将Blob类型转化成File类型
                this.fileInfo.name, // 设置File类型的文件名称
                { type: this.fileInfo.type } // 设置File类型的文件类型
            )
          'file',
          new File(
            [fileData], // 将Blob类型转化成File类型
            this.fileInfo.name, // 设置File类型的文件名称
            { 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 +101,8 @@
          this.updateImg = false
          this.$emit('uploadSuccess', { imgurl: res.imgaddr, imgurlfull: res.url, name: res.originname })
          this.$emit('uploadEnd')
        }, () => {
          this.loading = false
        })
      })
    },
@@ -91,13 +110,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
      }
      // 上传成功后将图片地址赋值给裁剪框显示图片