npm i vue-cropper -D

<

<!-- 图片剪切弹窗 --><van-dialogv-model="showCropperDialog":show-confirm-button="false":close-on-click-overlay="true"><vueCropperref="cropper":img="option.img":outputSize="option.size":outputType="option.outputType":info="true":full="option.full":canMove="option.canMove":canMoveBox="option.canMoveBox":original="option.original":autoCrop="option.autoCrop":autoCropWidth="option.autoCropWidth":autoCropHeight="option.autoCropHeight":fixedBox="option.fixedBox"></vueCropper><div class="upload-btn"><van-button type="primary" @click="uploadCropImg">确认上传</van-button></div></van-dialog>

import Vue from 'vue'
import { Dialog, Button } from 'vant'
import VueCropper from 'vue-cropper'
Vue.use(Dialog)
Vue.use(Button)
Vue.use(VueCropper)

 // 上传剪切后用户的头像图片uploadCropImg () {if(this.upload_type === 'user_picture') {// 隐藏裁剪图片弹窗this.showCropperDialog = falsethis.$refs.cropper.getCropData((data) => { var parames = new URLSearchParams()parames.append('file[content]', data)this.$post('//api/uploads/image',parames).then((response) => {if (response.status == 'success') {// ...} else {// ...}})})}},// 打开文件夹选择上传图片
uploadImg(e, num, type = 'user_picture') { var _this = this;//上传图片 var file = e.target.files[0] _this.fileName = file.name;if (!/.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) { return false } var reader = new FileReader(); reader.onload =(e) => { let data; if (typeof e.target.result === 'object') { // 把Array Buffer转化为blob 如果是base64不需要 data = window.URL.createObjectURL(new Blob([e.target.result])) } else { data = e.target.result }if (num === 1) { _this.option.img = data } else if (num === 2) { _this.example2.img = data } } // 转化为base64 // reader.readAsDataURL(file) // 转化为blob reader.readAsArrayBuffer(file)this.upload_type = typethis.showCropperDialog = true    },