FangYuan/WebRoot/lib/crop/crop.js

/**
 * Created by 熊竹 on 2017/3/15.
 */

Vue.component('crop-upload', {
    template: '<div >' +
    '<input type="file" style="display: none;" ref="input" @change="fileChange"/>' +
    '<div @click="chooseFile" class="crop-upload-box" :style="{height:height,width:width}">' +
    '<img v-if="src" :src="src" :style="{height:height,width:width,lineHeight:height}"/>' +
    '<i v-else :style="{height:height,width:width,lineHeight:height}" class="icon el-icon-plus"></i>' +
    '</div>' +
    '<div v-show="showCropper" class="crop-wrap" ref="wrap">' +
    '<img id="cropper" :src="raw" ref="cropper" :style="cropperStyle"/>' +
    '<div style="margin-top: 20px">' +
    '<el-button @click="cancel">取消</el-button>' +
    '<el-button type="primary" @click="confirm">确认</el-button>' +
    '</div>' +
    '</div>' +
    '</div>',
    props: {
        src: {
            type: String,
            default: ''
        },
        ratioX: {
            type: Number,
            default: 1
        },
        ratioY: {
            type: Number,
            default: 1
        }
    },
    data: function () {
        return {
            showCropper: false,
            raw: '',
            croperHeight: 0,
            croperWidth: 0
        }
    },
    computed: {
        height: function () {
            return 180 + 'px';
        },
        width: function () {
            return 180 * this.ratioX / this.ratioY + 'px';
        },
        cropperStyle: function () {
            return {
                height: this.croperHeight,
                width: this.croperWidth,
                maxWidth: '100px'
            }
        }
    },
    methods: {
        fileChange: function (res) {
            var reader = new FileReader();
            reader.onload = function () {
                var image = new Image();
                image.onload = function () {
                    this.croperWidth = image.width;
                    this.croperHeight = image.height;
                    this.raw = image.src;
                    this.showCropper = true;
                    $('#cropper').Jcrop({
                        aspectRatio: 1,
                        allowSelect: false,
                        bgOpacity: 0.3,
                        setSelect: [0, 0, 100, 100],
                        onChange: function (res) {
                            console.log(res)
                        }.bind(this)
                    });
                }.bind(this);
                image.src = reader.result;
            }.bind(this);
            reader.readAsDataURL(this.$refs.input.files[0]);
        },
        chooseFile: function () {
            this.$refs.input.click();
        },
        upload: function () {
            var formData = new FormData();
            // 建立一个upload表单项，值为上传的文件
            formData.append('file', this.$refs.input.files[0]);
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '../assets/uploadFile');
            // 定义上传完成后的回调函数
            xhr.onload = function () {
                if (xhr.status === 200) {
                    var res = JSON.parse(xhr.response)
                    if (res.success) {
                        this.$emit('uploaded', res.data[0])
                    }
                }
            }.bind(this);
            xhr.send(formData);
        },
        cancel: function () {
            this.showCropper = false;
        },
        confirm: function () {

        }
    }

});