vue实现头像剪裁上传

实现头像剪裁上传的功能

在Vue中实现头像剪裁上传功能，通常需要结合图片剪裁库和文件上传逻辑。以下是详细实现方法：

使用vue-cropperjs库

安装vue-cropperjs库：

npm install vue-cropperjs

在组件中引入并使用：

<template>
  <div>
    <input type="file" @change="uploadImage" accept="image/*">
    <vue-cropper
      ref="cropper"
      :src="imgSrc"
      :aspect-ratio="1"
      :auto-crop-area="0.8"
    ></vue-cropper>
    <button @click="cropImage">裁剪</button>
  </div>
</template>

<script>
import VueCropper from 'vue-cropperjs'
import 'cropperjs/dist/cropper.css'

export default {
  components: {
    VueCropper
  },
  data() {
    return {
      imgSrc: '',
      croppedImage: null
    }
  },
  methods: {
    uploadImage(e) {
      const file = e.target.files[0]
      if (!file.type.includes('image/')) {
        alert('请选择图片文件')
        return
      }

      const reader = new FileReader()
      reader.onload = (event) => {
        this.imgSrc = event.target.result
      }
      reader.readAsDataURL(file)
    },

    cropImage() {
      this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {
        this.croppedImage = blob
        this.uploadCroppedImage()
      }, 'image/jpeg', 0.8)
    },

    uploadCroppedImage() {
      const formData = new FormData()
      formData.append('avatar', this.croppedImage, 'avatar.jpg')

      // 这里替换为你的API上传地址
      axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log('上传成功', response)
      }).catch(error => {
        console.error('上传失败', error)
      })
    }
  }
}
</script>

使用Element UI实现

如果项目中使用Element UI，可以结合其Upload组件：

<template>
  <el-upload
    action="#"
    :auto-upload="false"
    :on-change="handleChange"
    :show-file-list="false"
  >
    <el-button type="primary">选择图片</el-button>

    <el-dialog :visible.sync="dialogVisible">
      <vue-cropper
        ref="cropper"
        :src="imgSrc"
        :aspect-ratio="1"
      ></vue-cropper>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="cropImage">确定</el-button>
      </span>
    </el-dialog>
  </el-upload>
</template>

<script>
import VueCropper from 'vue-cropperjs'
import 'cropperjs/dist/cropper.css'

export default {
  components: { VueCropper },
  data() {
    return {
      dialogVisible: false,
      imgSrc: ''
    }
  },
  methods: {
    handleChange(file) {
      this.imgSrc = URL.createObjectURL(file.raw)
      this.dialogVisible = true
    },

    cropImage() {
      this.$refs.cropper.getCroppedCanvas().toBlob(blob => {
        const formData = new FormData()
        formData.append('file', blob, 'avatar.jpg')
        // 上传逻辑...
        this.dialogVisible = false
      })
    }
  }
}
</script>

实现圆形头像剪裁

如果需要圆形头像，可以在CSS中添加样式：

.cropper-view-box, .cropper-face {
  border-radius: 50%;
}

.cropper-container {
  width: 100%;
  height: 400px;
}

图片压缩处理

上传前可对图片进行压缩处理：

cropImage() {
  this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {
    if (blob.size > 2 * 1024 * 1024) {  // 大于2MB则压缩
      this.compressImage(blob)
    } else {
      this.uploadImage(blob)
    }
  }, 'image/jpeg', 0.8)
},

compressImage(blob) {
  const img = new Image()
  img.src = URL.createObjectURL(blob)
  img.onload = () => {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    const MAX_WIDTH = 800
    const MAX_HEIGHT = 800
    let width = img.width
    let height = img.height

    if (width > height) {
      if (width > MAX_WIDTH) {
        height *= MAX_WIDTH / width
        width = MAX_WIDTH
      }
    } else {
      if (height > MAX_HEIGHT) {
        width *= MAX_HEIGHT / height
        height = MAX_HEIGHT
      }
    }

    canvas.width = width
    canvas.height = height
    ctx.drawImage(img, 0, 0, width, height)

    canvas.toBlob((compressedBlob) => {
      this.uploadImage(compressedBlob)
    }, 'image/jpeg', 0.7)
  }
}

以上方法提供了完整的头像剪裁上传实现方案，可根据项目需求进行调整和扩展。