h5头像上传（从相册选择，拍照）裁剪

> <template>   <div class="uploadava">
>     <van-overlay :show="show" @click="$emit('update:showAta', false),show = false">
>       <div class="update-avatar">
>         <ul class="avatar-select-type" @click.stop>
>           <van-uploader :before-read="beforeRead" capture="camera">
>             <li class="select-type-photo upload-avator">拍摄</li>
>           </van-uploader>
>           <li class="update-avatar-line"></li>
>           <van-uploader :before-read="beforeRead">
>             <li class="select-type-album upload-avator">从手机相册选择</li>
>           </van-uploader>
>         </ul>
>         <p @click.stop="show = false,$emit('update:showAta', false)">取消</p>
>       </div>
>     </van-overlay>
>     <van-popup
>       duration="0"
>       v-model="showCropper"
>       position="top"
>       :style="{ height: '100%' }"
>     >
>       <div class="cropper-container">
>         <van-nav-bar
>           :fixed = true
>           title="标题"
>           left-text="裁剪"
>           right-text="完成"
>           left-arrow
>           @click-left="onClickLeft"
>           @click-right="getCropBlob"
>            />
>         <vueCropper
>           ref="cropper"
>           :img="option.img"
>           :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>
>       </div>
>     </van-popup>   </div> </template> <script> import { VueCropper } from 'vue-cropper' import { uploadAva } from '@/api/my' export default
> {   name: 'uploadAva',   components: {
>     VueCropper   },   props: {
>     showAta: {
>       default: false,
>       type: Boolean
>     },
>     avaUrl: {
>       default: '',
>       type: String
>     }   },   data () {
>     return {
>       show: true, // 上传类型的弹窗
>       imageFileName: '',
>       showCropper: false, // 裁剪的弹窗
>       option: {
>         img: '',
>         outputSize: 0.8,
>         info: false, // 裁剪框的大小信息
>         outputType: 'jpeg', // 裁剪生成图片的格式
>         canScale: true, // 图片是否允许滚轮缩放
>         autoCrop: true, // 是否默认生成截图框
>         autoCropWidth: window.innerWidth - 100 + 'px', // 默认生成截图框宽度
>         autoCropHeight: window.innerWidth - 100 + 'px', // 默认生成截图框高度
>         high: true, // 是否按照设备的dpr 输出等比例图片
>         fixedBox: false, // 固定截图框大小 不允许改变
>         fixed: true, // 是否开启截图框宽高固定比例
>         fixedNumber: [1, 1], // 截图框的宽高比例
>         full: true, // 是否输出原图比例的截图
>         canMoveBox: true, // 截图框能否拖动
>         original: false, // 上传图片按照原始比例渲染
>         centerBox: true, // 截图框是否被限制在图片里面
>         infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
>         mode: '100% auto' // 图片默认渲染方式
>       }
>     }   },   methods: {
>     beforeRead (file) {
>       if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
>         this.$toast('请上传 jpg/png 格式图片')
>         return false
>       }
>       this.showCropper = true
>       this.imageToBase64(file)
>       this.imageFileName = file.name
>     },
>     imageToBase64 (file) {
>       let reader = new FileReader()
>       reader.readAsDataURL(file)
>       reader.onload = () => {
>         this.option.img = reader.result
>       }
>     },
>     getCropBlob () {
>       let formData = new FormData()
>       this.$refs.cropper.getCropBlob((data) => {
>         formData.append('headFile', data, this.imageFileName)
>         formData.append('id', this.$store.getters.user.userId)
>         uploadAva(formData).then((res) => {
>           this.showCropper = false
>           this.$emit('update:showAta', false)
>           this.$emit('update:avaUrl', res.data)
>         })
>       })
>     },
>     onClickLeft () {
>       this.showCropper = false
>       this.$emit('update:showAta', false)
>     }   } } </script> <style lang="scss" scoped> .uploadava {   .update-avatar {
>     @include flexer(flex, column, flex-end, center);
>     height: 100%;
>     font-size: $font-size-normal-x;
>     text-align: center;
>     .update-avatar-line {
>       width: 100%;
>       height: 1px;
>       background-color: #979797;
>     }
>     .avatar-select-type {
>       @include flexer(flex, column, center, center);
>       background-color: #fff;
>       width: 346px;
>       border-radius: 12px;
>       padding-bottom: 4px;
>       .upload-avator {
>         padding: 14px;
>       }
>     }
>     p {
>       margin: 15px 0 30px;
>       background-color: #fff;
>       width: 346px;
>       border-radius: 12px;
>       padding: 15px 0 18px;
>     }   }   .cropper-container {
>     height: 100vh;
>     .van-nav-bar {
>       background-color: #fff;
>       :global(.van-nav-bar__text) {
>         color: red;
>         font-size: $font-size-normal-x;
>       }
>       :global(.van-nav-bar__text:nth-child(2)){
>         color: #000;
>         font-weight: 500;
>       }
>       :global(.van-icon) {
>         color: red;
>       }
>     }   }   .vue-cropper {
>     background: #000;
>     height: 100%;
>     padding-top: 46px;
>     box-sizing: border-box;   } } </style>