Vue实现头像截取上传

Vue实现头像截取上传的方法

使用vue-cropper组件

安装vue-cropper组件：

npm install vue-cropper

在Vue组件中引入并使用：

<template>
  <div>
    <input type="file" accept="image/*" @change="uploadImage">
    <vue-cropper
      ref="cropper"
      :img="imgSrc"
      :autoCrop="true"
      :fixed="true"
      :fixedNumber="[1, 1]"
    ></vue-cropper>
    <button @click="cropImage">裁剪</button>
  </div>
</template>

<script>
import VueCropper from 'vue-cropper'

export default {
  components: { VueCropper },
  data() {
    return {
      imgSrc: ''
    }
  },
  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.getCropBlob((blob) => {
        const formData = new FormData()
        formData.append('avatar', blob)
        // 上传到服务器
        axios.post('/upload', formData).then(response => {
          console.log('上传成功', response)
        })
      })
    }
  }
}
</script>

使用cropper.js库

安装cropper.js：

npm install cropperjs

在Vue组件中使用：

<template>
  <div>
    <input type="file" accept="image/*" @change="uploadImage">
    <img ref="image" style="max-width: 100%">
    <button @click="crop">裁剪</button>
  </div>
</template>

<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'

export default {
  data() {
    return {
      cropper: null,
      imageFile: null
    }
  },
  methods: {
    uploadImage(e) {
      const file = e.target.files[0]
      if (!file.type.includes('image/')) {
        alert('请选择图片文件')
        return
      }
      this.imageFile = file
      const reader = new FileReader()
      reader.onload = (event) => {
        this.$refs.image.src = event.target.result
        if (this.cropper) {
          this.cropper.destroy()
        }
        this.cropper = new Cropper(this.$refs.image, {
          aspectRatio: 1,
          viewMode: 1
        })
      }
      reader.readAsDataURL(file)
    },
    crop() {
      this.cropper.getCroppedCanvas().toBlob((blob) => {
        const formData = new FormData()
        formData.append('avatar', blob, 'avatar.png')
        // 上传到服务器
        axios.post('/upload', formData).then(response => {
          console.log('上传成功', response)
        })
      })
    }
  }
}
</script>

使用Element UI的Upload组件结合裁剪

如果使用Element UI，可以结合其Upload组件实现：

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

    <el-dialog :visible.sync="dialogVisible">
      <vue-cropper
        ref="cropper"
        :img="imgSrc"
        :autoCrop="true"
        :fixed="true"
        :fixedNumber="[1, 1]"
      ></vue-cropper>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitCrop">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import VueCropper from 'vue-cropper'

export default {
  components: { VueCropper },
  data() {
    return {
      imgSrc: '',
      dialogVisible: false
    }
  },
  methods: {
    handleChange(file) {
      this.imgSrc = URL.createObjectURL(file.raw)
      this.dialogVisible = true
    },
    submitCrop() {
      this.$refs.cropper.getCropBlob((blob) => {
        const formData = new FormData()
        formData.append('avatar', blob)
        // 上传到服务器
        axios.post('/upload', formData).then(response => {
          this.dialogVisible = false
          console.log('上传成功', response)
        })
      })
    }
  }
}
</script>

服务器端处理

Node.js Express示例处理上传的图片：

const express = require('express')
const multer = require('multer')
const path = require('path')

const app = express()
const upload = multer({ dest: 'uploads/' })

app.post('/upload', upload.single('avatar'), (req, res) => {
  // 处理上传的文件
  const filePath = path.join(__dirname, 'uploads', req.file.filename)
  // 可以在这里对图片进行进一步处理或保存到数据库
  res.json({ url: `/avatars/${req.file.filename}` })
})

app.listen(3000, () => console.log('Server started'))

注意事项

• 前端需要处理图片大小限制，避免上传过大图片
• 服务器端应该验证文件类型和大小
• 考虑添加加载状态和错误处理
• 移动端适配可能需要额外处理
• 裁剪比例可以根据需求调整