移动端vue使用vant上传图片并裁剪

移动端vue使用vant上传图片并裁剪：
效果图如下：

使用到的组件：vueCropper，van-popup，van-uploader
首先基于vueCropper封装了一个子组件页面：ImageCropper.vue

<template>
	<!-- 剪裁图片组件 -->
    <van-popup
      class="bg-tran image-cropper"
      v-model="visible"
      closeable
      position="top"
      :lock-scroll="false"
      :style="{ height: '100%' }"
    >
      <div class="flex-column-center height100">
        <vueCropper
          ref="imageCropper"
          :img="url"
          :outputSize="option.outputSize"
          :outputType="option.outputType"
          :info="option.info"
          :full="option.full"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :original="option.original"
          :autoCrop="option.autoCrop"
          :fixed="option.fixed"
          :fixedNumber="option.fixedNumber"
          :centerBox="option.centerBox"
          :infoTrue="option.infoTrue"
          :fixedBox="option.fixedBox"
          :high="option.high"
          :mode="option.mode"
        ></vueCropper>
        <van-col span="24" class="font14 col-white">
          <van-col span="8" class="p-2" @click="onCancel"><span>取消</span></van-col>
          <van-col span="8" class="p-2 text-center" @click="rotateImage"><span class="font18"><van-icon name="replay" /></span></van-col>
          <van-col span="8" class="p-2 text-right" @click="onConfirm"><span>确定<i class="el-icon-loading" v-if="loading"></i></span></van-col>
        </van-col>
      </div>
    </van-popup>
</template>
<script>
import {
  //随机字符串
  randomString as utilRandomString
} from "@/utils/utility";
import { VueCropper } from 'vue-cropper';
const COS = require('cos-js-sdk-v5');

export default {
  components: {
    VueCropper,
  },
  props: {
    visible: Boolean, //控制是否显示
    url: String //裁剪的图片
  },
	data() {
		return {
	      loading: false,
	      option: {
	        outputSize: 0.8,
	        info: false, // 裁剪框的大小信息
	        outputType: 'jpeg', // 裁剪生成图片的格式
	        canScale: false, // 图片是否允许滚轮缩放
	        autoCrop: true, // 是否默认生成截图框
	        autoCropWidth: window.innerWidth - 100 + 'px', // 默认生成截图框宽度
	        autoCropHeight: window.innerWidth - 100 + 'px', // 默认生成截图框高度
	        high: true, // 是否按照设备的dpr 输出等比例图片
	        fixedBox: true, // 固定截图框大小 不允许改变
	        fixed: true, // 是否开启截图框宽高固定比例
	        fixedNumber: [1, 1], // 截图框的宽高比例
	        full: true, // 是否输出原图比例的截图
	        canMoveBox: false, // 截图框能否拖动
	        original: false, // 上传图片按照原始比例渲染
	        centerBox: false, // 截图框是否被限制在图片里面
	        infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
	        mode: '100% auto' // 图片默认渲染方式
	      }
		}
	},
  methods: {
    rotateImage() {
      //旋转图片
      this.$refs.imageCropper.rotateRight();
    },
    onCancel() {
      //取消
      this.$emit('cancel');
    },
    onConfirm() {
      //确定
      if(this.loading) {
        return ;
      }
      this.loading = true;
      this.$refs.imageCropper.getCropBlob((file) => {
		//此时可以拿file进行文件上传了，以下为腾讯云COS的上传demo，可以改为自己的上传方式
        this.handleChange(file).then((data)=>{
          //上传成功 执行回调
          this.$emit('success', file);
          this.loading = false;
          //请求接口，更新头像操作
        }, (error) => {
          this.loading = false;
        });
      });
    },
    handleChange(file) {
      //文件上传
      return new Promise((resolve, reject)=>{
        //获取腾讯云COS临时密钥
        axios("xxxxx", "get", {
          fileType: 'file'
        })
        .then((response) => {
          var credentials = response.credentials;
          var cos = new COS({
            getAuthorization: function (options, callback) {
              callback({
                TmpSecretId: credentials.tmpSecretId,
                TmpSecretKey: credentials.tmpSecretKey,
                SecurityToken: credentials.sessionToken,
                StartTime: credentials.startTime, // 时间戳，单位秒
                ExpiredTime: credentials.expiredTime, // 过期时间 时间戳
              })
            },
          })
          // 上传文件
          cos.putObject({
            Bucket: 'xxxx', //存储桶
            Region: 'xxxx', //存储桶所在地域
            Key: 'xxxx', //在前面加上路径写法可以生成文件夹
            StorageClass: 'xxxx', //设置对象的存储类型，枚举值
            Body: file, //上传文件对象
          }, (error, data) => {
            if(error == undefined) {
              //返回数据
              resolve(data)
            }else {
              //返回异常
              reject(error);
            }
          })
        })
        .catch((error) => {
          reject(error);
        });
      })
    }
  }
}
</script>
<style>
.image-cropper .height100 {
	height: 100vh;
}
.image-cropper .flex-column-center { 
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}
.image-cropper .vue-cropper {
  background: #000;
}
.image-cropper .vue-cropper .cropper-view-box {
  outline: 1px solid #fff !important;
  outline-color: #fff !important;
}
.image-cropper .van-col {
  height: 50px;
  line-height: 50px;
  margin-bottom: 30px;
}
.image-cropper .van-col .el-icon-loading {
  margin-left: 5px;
}
</style>

父页面引入方式如下

<template>
  <div class="my-info">
    <div>上传图片裁剪</div>
    <img :src="avatarUrl" />
    <van-uploader :before-read="beforeRead" :after-read="afterRead" accept="image/png, image/jpeg" :max-size="1024 * 1024 * 11" @oversize="onOversize">
      <van-button type="primary">上传头像</van-button>
    </van-uploader>
    <image-cropper
      :visible="cropperVisible"
      :url="imgUrl"
      :file-info="fileInfo"
      @cancel="cropperVisible = false"
      @success="cropperSuccess"
    />
  </div>
</template>
<script>
import ImageCropper from '@/components/ImageCropper'
import { Toast } from 'vant';
export default {
  components: { ImageCropper },
  data() {
    return {
      fileInfo: {},
      imgUrl: '',
      avatarUrl: require('@/assets/img/default-avatar.png'), //默认头像
      cropperVisible: false
    };
  },
  methods: {
    onOversize() {
      Toast('图片大小不能超过10M');
    },
    beforeRead(file) {
      if (file.type !== 'image/png' && file.type !== 'image/jpeg') {
        Toast('请上传图片');
        return false;
      }
      return true;
    },
    cropperSuccess(file) {
      //裁剪上传完成
      this.avatarUrl = 'https://' + file.location;
      this.cropperVisible = false;
      //请求保存头像操作
      axios("/upload/xxxx", "post", {})
      .then((response) => {
        Toast('上传头像成功');
      })
      .catch((error) => {
        Toast('上传头像失败，请重试');
      });
    },
    afterRead(file) {
      //图片加载完成 进行裁剪
      file = file.file;
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = () => {
        //显示裁剪框
        this.imgUrl = fileReader.result;
        //将文件信息传过去
        this.fileInfo = {
          name: file.name,
          suffix: file.name.substring(file.name.lastIndexOf(".") + 1)
        };
        this.cropperVisible = true;
      };
    }
  },
};
</script>

这样就大功告成了！