vueCropper之头像剪切上传

<template>
    <div class="app-container">
        <div class="image-list">
            <div class="source-image">
                <vueCropper
                        ref="cropper"
                        :img="option.img"
                        :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"
                        :centerBox="true"
                        :fixedBox="option.fixedBox"
                        @realTime="realTime"
                ></vueCropper>
            </div>

            <div style="margin-left:20px;">
                <div class="show-preview" :style="{'width': '150px', 'height':'150px',  'overflow': 'hidden', 'margin': '5px'}">
                    <div :style="previews.div" class="preview">
                        <img :src="previews.url" :style="previews.img">
                    </div>
                </div>
            </div>
        </div>
        <div>
            <label class="btn btn-orange" for="uploads" style="display:inline-block;color: #666666;font-size: 14px;border: solid 1px #DCDFE6;width: 100px;padding: 0;text-align: center;border-radius: 4px;;line-height: 38px;margin-right: 10px">选择图片</label>
            <input type="file" id="uploads" :value="imgFile" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)">

            <el-button @click.prevent="finish">确定</el-button>
        </div>

    </div>
</template>

<script>
    import { VueCropper } from 'vue-cropper';
    export default {
        name: "index",
        components: {
            VueCropper,
        },
        data() {
            return {
                targetUrl:null,
                previews:{},
                option: {
                    img: '',
                    outputSize:1, //剪切后的图片质量（0.1-1）
                    full: false,//输出原图比例截图 props名full
                    outputType: 'png',
                    canMove: true,
                    original: false,
                    canMoveBox: true,
                    autoCrop: true,
                    autoCropWidth:150,
                    autoCropHeight: 150,
                    fixedBox: true
                },
                fileName:'',  //本机文件地址
                imgFile:'',
            };
        },
        methods:{
            //选择本地图片
            uploadImg(e, num) {
                console.log('uploadImg',e.target.files[0],e.target.value);
                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)) {
                    alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
                    return false
                }
                var reader = new FileReader();
                reader.onload =(e) => {
                    let data;
                    console.log("e.target.result=",e.target.result)
                    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
                    }
                }
                // 转化为base64
                // reader.readAsDataURL(file)
                // 转化为blob
                reader.readAsArrayBuffer(file);

            },
            //
            realTime(data){
                this.previews = data
            },
            //上传图片（点击上传按钮）
            finish(type) {
                let formData = new FormData();
                this.$refs.cropper.getCropBlob((data) => {
                    formData.append("file", data, this.fileName);

                })

            },
        },
    }
</script>

<style scoped>
    .image-list {
        display: flex;
        margin-bottom: 20px;
        justify-content: space-between;
        width: 630px;
    }

    .source-image {
        width: 300px;
        height: 300px;
    }

    .target-image {
        width: 300px;
        height: 300px;
    }

    .target-image img {
        width: 100%;
        height: 100%;
    }
</style>