vue项目--实现编辑裁剪图片上传头像的功能

1.父页面创建一个input标签,隐藏显示 ,绑定ref 供下边获取选择的文件

  <input @change="avaChange" type="file" ref="avator" hidden>

2.触发选择头像图片事件 打开选择文件

  <van-cell @click="editAvator" title="头像" is-link>
      <van-image fit="cover" round class="avater" :src="userInfo.photo" />
  </van-cell>

 editAvator() {
    this.$refs.avator.click()
    console.log('头像', this.$refs.avator);
},

3.选择图片 使用window.URL.createObjectURL()方法构建一个本地的blob对象路径

avaChange() {
    console.log('改变了', this.$refs.avator.files[0]);
    //获取文件对象  
    //基于文章对象获取blob数据
    this.img_src = window.URL.createObjectURL(this.$refs.avator.files[0])
    console.log(' this.img_src', this.img_src);
    this.isUpdateAvaShow = true
    //如果选择同一个文件不会触发change事件  清空value
    this.$refs.avator.value = ''
},

4.创建头像裁剪组件 并将图片传递过去

<van-popup v-model="isUpdateAvaShow" style="height: 100%;" position="bottom">
    <editAvater v-if="isUpdateAvaShow" @upImg="userInfo.photo = $event" @closePop="isUpdateAvaShow = false"
        :img_src="img_src">
    </editAvater>
</van-popup>

5.组件页面初始化 设置基本样式

<div class="box">
        <img ref="img" class="imgbox" :src="img_src" alt="">
        <div class="tool">
            <div class="cel" @click="$emit('closePop')">取消</div>
            <div class="cfm" @click="finish">完成</div>
        </div>
    </div>

.box {
    background-color: #000;
    height: 100%;
    color: #fff;
}

.imgbox {
    max-width: 100%;
    display: block;
}

.tool {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;

    .cel,
    .cfm {
        width: 90px;
        height: 90px;
        font-size: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

6.安装引入cropperjs

npm install cropperjs

import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'

7.mounted中挂载配置项

//data中 定义cropper: null
mounted() {
    const image = this.$refs.img
    this.cropper = new Cropper(image, {
        viewMode: 1, // 只能在裁剪的图片范围内移动
        dragMode: 'move', // 画布可以移动
        aspectRatio: 1, // 裁剪区默认正方形
        autoCropArea: 1, // 自动调整裁剪图片
        cropBoxMovable: false, // 禁止裁剪区移动
        cropBoxResizable: false, // 禁止裁剪区缩放
        background: false // 关闭默认背景
    })
    console.log(this.cropper)
},

8.裁剪的两种方式(服务端,客户端) 配置完成方法

finish() {
    //基于服务器端的裁切使用 getData方法获取裁切参数
    // console.log(this.cropper.getData())
    // 纯客户端 的裁切使用 getCroppedCanvas 获取裁切的文件对象
    this.cropper.getCroppedCanvas().toBlob(async blob => {
        console.log(blob)
    })
}

9.请求接口,传递数据,回显头像

finish() {
    this.cropper.getCroppedCanvas().toBlob(async blob => {
        console.log(blob)
        //如果接口 Content-Type是multipart/form-data
        //必须传递FormData对象

        //如果接口 Content-Type是application/json
        //传普通js对象
        const formData = new FormData()
        formData.append('photo', blob)
        const data = await editAvaterApi(formData)
        console.log('data111', data);
        //关闭弹出层
        this.$emit('closePop')
        //更新视图
        this.$emit('upImg', data.data.data.photo)
    })
}