xyxiao001 / vue-cropper Goto Github PK

this.$refs.cropper.getCropData((data) => {
                this.$refs.avatarForm.reset();
                this.$post(`${this.$url}/teacher/uploadFileToQiniu`,{
                    imgStream : data
                })
                .then(res=>{

                })
                .catch(err=>{

                })
            })

                     <VueCropper
                            ref="cropper"
                            :img="example2.img"
                            :outputSize="example2.size"
                            :outputType="example2.outputType"
                            :info="example2.info"
                            :canScale="example2.canScale"
                            :autoCrop="example2.autoCrop"
                            :autoCropWidth="example2.width"
                            :autoCropHeight="example2.height"
                    ></VueCropper>

                    img: 'http://ofyaji162.bkt.clouddn.com/bg1.jpg',    // 图片地址
                    info: false,    // 宽高信息
                    size: 1,        // 图片质量
                    outputType: 'jpeg', // 输出格式
                    canScale: false,    // 底图是否缩放
                    autoCrop: true,     // 自动截图框
                    // 只有自动截图开启 宽度高度才生效
                    autoCropWidth: 300,
                    autoCropHeight: 250,
                    // 开启宽度和高度比例
                    fixed: true,
                    fixedNumber: [1, 1],

<template>
  <div class="edit-teacher-container">
        <Card>
                <div slot="title">
                    <Button type="text" icon="reply" @click.native="returnTeacherPage">返回</Button>
                </div>          
                <Button slot="extra" type="primary" icon="plus-round" @click.native="saveTeacher">保存</Button>
                <Row :gutter="16">
                    <Col span="10">
                        <Card style="height:500px">
                            <p slot="title">
                                <Icon type="person"></Icon>
                                设置老师头像
                            </p>
                                <Button type="primary" @click="modal1 = true">上传文件</Button>


                        </Card>
                    </Col>
                </Row>
        </Card>

        <Modal
            v-model="modal1"
            title="设置老师头像"
            width=800
            @on-ok="ok"
            @on-cancel="cancel">
            <vueCropper
                ref="cropper2"
                :img="example2.img"
                :outputSize="example2.size"
                :outputType="example2.outputType"
                :info="example2.info"
                :canScale="example2.canScale"
                :autoCrop="example2.autoCrop"
                :autoCropWidth="example2.width"
                :autoCropHeight="example2.height"
                :fixed="example2.fixed"
                :fixedNumber="example2.fixedNumber"
            ></vueCropper>
    </Modal>
  </div>
</template>
<script>
import vueCropper from 'vue-cropper'


export default {
    components:{
        vueCropper
    },
data () {
    return {
        modal1: false,
        example2: {
				img: 'http://ofyaji162.bkt.clouddn.com/bg1.jpg',
				info: true,
				size: 1,
				outputType: 'jpeg',
				canScale: false,
				autoCrop: true,
				// 只有自动截图开启 宽度高度才生效
				autoCropWidth: 300,
				autoCropHeight: 300,
				// 开启宽度和高度比例
				fixed: true,
				fixedNumber: [1, 1]
			}
    }
}
</script>

.avatar-box {
            position: relative;
            height: 500px;
        }
<div class="avatar-box">
                    <VueCropper ref="cropper"
                    :img="option.img"
                    :autoCrop="true"
                    :outputType="option.outputType"></VueCropper>
                </div>