cropperjs裁剪上传头像使用方法

头像的更新流程

1-创建表单的隐藏域

2-监听隐藏域的change事件

3-利用domElement.files方法获取到用户所选择的文件

4-如果是单选，则直接files[0]

5-得到的files[0] 可以利用URL.createObjectUrl(files[0])方法获取到blob对象

6-这个blob表示图片的原始数据，以url的形式进行展示

7-img标签可以直接展示这个url

黑马头条的更换头像的实现

1-html标签结构

扫描二维码关注公众号，回复： 14637156 查看本文章

<!-- 头像 -->
    <van-cell title="头像" is-link  @click="avatorClickFn">
      <img :src="$store.state.userInfo.photo" class="avator">
    </van-cell>
    <!-- 隐藏的input表单域 -->
    <input type="file" v-show="false" ref="FileEleRef" accept="image/png, image/jpeg" @change="SelectPhoto">

2-点击触发隐藏表单的click事件，监听input的change事件

avatorClickFn() {
      // 触发input的点击事件
      this.$refs.FileEleRef.click()
    },
    SelectPhoto() {
      // 触发了表单的change事件 可以通过files 拿到当前选择的值
      // 判断用户当前有没有选择图片  （是确定按钮还是取消那妞）
      if (this.$refs.FileEleRef.files) {
        // 点击了确定
        // 拿到当前选择的图片 利用URL.createObjectURL()
        this.SelectAvator = URL.createObjectURL(this.$refs.FileEleRef.files[0])
        // 触发popup弹层弹出
        this.AvatorShow = true
      }
    }

3-弹层

1-下载并导入cropperjs 创建裁剪区域
2-new 一个 cropper 实例 new Cropper(element[, options]) 第一个参数是img / canvs 实例第二个是配置项
3-取消行为点击取消后，让popup隐藏即将value值广播为false
4-完成行为点击完成使用cropper.getCroppedCanvas().toBlob 拿到当前裁剪区域的图片发起更换头像请求调用取消
5-利用formData发请求

<template>
  <van-popup
  position="bottom" :style="{ height: '100%' }"
  :value="value" @input="$emit('input',$event)">
    <img :src="photo" alt="" class="avator" ref="ImgAvator">
    <div class="bottom">
      <span class="close" @click="closeFn">取消</span>
      <span class="finished" @click="finishedFn">完成</span>
    </div>
  </van-popup>
</template>

<script>
/**
 * 1-下载并导入cropperjs  创建裁剪区域
 * 2-new 一个 cropper 实例 new Cropper(element[, options])  第一个参数是img / canvs 实例 第二个是配置项
 * 3-取消行为  点击取消后，让popup隐藏即将value值广播为false
 * 4-完成行为   点击完成 使用cropper.getCroppedCanvas().toBlob 拿到当前裁剪区域的图片 发起更换头像请求 调用取消行为
 */
 //导入样式，必须要导入
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'
// 导入接口
import { ChangeUserAvator } from '@/api/user'
// vant 组件
import { Toast } from 'vant'

export default {
  name: 'AvatorVue',
  props: {
    value: Boolean,
    photo: String
  },
  data () {
    return {
      cropper: null
    }
  },
  mounted() {
    const ImgRef = this.$refs.ImgAvator
    this.cropper = new Cropper(ImgRef, {
      viewMode: 1, // 只能在裁剪的图片范围内移动
      dragMode: 'move', // 画布和图片都可以移动
      aspectRatio: 1, // 裁剪区默认正方形
      autoCropArea: 1, // 自动调整裁剪图片
      cropBoxMovable: false, // 禁止裁剪区移动
      cropBoxResizable: false, // 禁止裁剪区缩放
      background: false // 关闭默认背景
    })
  },
  methods: {
    closeFn() {
      this.$emit('input', false)
    },
    finishedFn() {
      this.cropper.getCroppedCanvas().toBlob(async(blob) => {
      // 创建formData实例对象 向formData中新增一个属性名为photo 属性值为我们刚裁剪出来的blob对象 
        const formData = new FormData()
        formData.append('photo', blob)
        Toast.loading({
          message: '加载中...',
          forbidClick: true
        })
        await ChangeUserAvator(formData)
        this.closeFn()
        Toast.success('头像更新成功')
        this.$store.dispatch('profile')
      })
    }
  }
}
</script>

<style scoped lang="scss">
.avator {
  width: 100vw;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.bottom {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  justify-content: space-between;
  span {
    z-index: 999;
    padding: 25px;
    font-size: 16px;
  }
}
</style>

cropperjs裁剪上传头像使用方法

猜你喜欢