vue项目中使用cropperjs实现上传头像并裁切头像大小

效果演示

在这里插入图片描述

github的cropperjs文档仓库地址:https://github.com/fengyuanchen/cropperjs

安装cropperjs

npm install cropperjs

使用cropperjs

html

1. 使用label的for属性和input进行绑定,实现点击label中的内容,相当于点击了input,达到上次图片功能
2. input的属性hidden相当于display:none
3. @change="onFileChange"是input本身支持的图片改变事件

<template>
  <div class="setting-container">
    <div class="avatar">
      <!-- 使用for和input表单元素进行绑定 -->
      <label for="file">
        <el-avatar shape="square"
                   :size="100"
                   fit="cover"
                   :src="previewImage">
        </el-avatar>
        <p>点击修改头像</p>
      </label>
      <!-- 上传图片 hidden相当于display:none -->
      <!-- @change="onFileChange"是input本身支持的图片改变事件 -->
      <input type="file"
             id="file"
             @change="onFileChange"
             ref="fileRef"
             hidden />
    </div>
    <!-- 预览上传头像对话框 -->
    <el-dialog title="修改头像"
               append-to-body
               @opened="onDialogOpend"
               :visible.sync="dialogVisible">
      <div class="preview-image-warp">
        <img class="preview-image"
             :src="previewImage"
             alt=""
             ref="previewImage"
             srcset="">
      </div>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="onUpdataPhoto">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

style

1. 修改cropperjs需要的样式

<style lang='less' scoped>
// 参考图片剪切文档,配置样式
.preview-image-warp {
  .preview-image {
    display: block;
    max-width: 100%;
    height: 300px;
  }
}
</style>

js

1. objectURL=windows.URL.createObjectURL(blod);blod 参数是File对象或者是Blod对象
2. file.files[0] 获得上传图片的file对象,通过window.URL.createObjectURL()方法创建对象URL
3. this.cropper.replace(this.previewImage),第一次初始化完成后,如果预览图片发生了变化,裁切器默认不会更新,可以使用裁切器的replace方法,更新数据

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

export default {
  name: 'settingIndex',
  props: {},
  components: {},
  data () {
    return {
      dialogVisible: false,
      previewImage: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', // 上传图片
      cropper: null // 裁切器实例
    }
  },
  computed: {},
  watch: {},
  methods: {
    // 上传图片改变
    onFileChange () {
      // 在对话框中显示上传的图片
      const file = this.$refs.fileRef
      // objectURL=windows.URL.createObjectURL(blod);blod 参数是File对象或者是Blod对象,
      // file.files[0] 获得上传图片的file对象
      // 通过window.URL.createObjectURL()方法创建对象URL
      const blobData = window.URL.createObjectURL(file.files[0])
      this.previewImage = blobData
      // 上传完头像,显示预览头像对话框
      this.dialogVisible = true
      // 解决选择相同文件不触发change事件问题
      file.value = ''
    },
    // 对话框打开动画结束的回调
    // 因为要在对话框中初始化剪切器,所以需要在对话框完全打开后再初始化剪切器
    onDialogOpend () {
      // 第一次初始化完成后,如果预览图片发生了变化,裁切器默认不会更新
      // 可以使用裁切器的replace方法,更新数据
      if (this.cropper) {
        this.cropper.replace(this.previewImage)
        return
      }
      // 初始化裁切器
      const image = this.$refs.previewImage
      this.cropper = new Cropper(image, {
        aspectRatio: 1, // 初始化剪切选择框大小
        viewMode: 1 // 不能把剪切框移出图片本身
      })
    },
    // 点击对话框确定按钮,更新修改后的图片
    onUpdataPhoto () {
      this.cropper.getCroppedCanvas().toBlob((file) => {
        // 发送请求更新图片
        // const formData = new FormData()
        // formData.append('croppedImage', file)
        // 调用后端接口,发送请求,更改头像图片
        // updateUserPhoto(formData).then(res => {
			// console.log(res)
		})
        const imgURL = window.URL.createObjectURL(file)
        console.log(imgURL)
        this.previewImage = imgURL
      })
      this.dialogVisible = false
    }
  },
  created () { },
  mounted () { },
  beforeDestroy () { }
}
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值