> <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>
h5头像上传(从相册选择,拍照)裁剪
最新推荐文章于 2023-03-06 11:54:00 发布