效果图：

首先全局安装依赖 npm install --s vue-cropper

代码如下：

<template>

    <div class="font-size-15-pk">

        <div class="cropper-content">

            <div class="cropper">

                <vueCropper

                        ref="cropper"

                        :img="option.img"

                        :outputSize="option.size"

                        :outputType="option.outputType"

                        :info="false"

                        :fixed="true"

                        :fixedNumber="[1,1]"

                        :full="option.full"

                        :centerBox="true"

                        :canMove="option.canMove"

                        :canMoveBox="option.canMoveBox"

                        :original="option.original"

                        :autoCrop="option.autoCrop"

                        :fixedBox="option.fixedBox"

                        :autoCropWidth="option.autoCropWidth"

                        :autoCropHeight="option.autoCropHeight"

                        @realTime="realTime"

                ></vueCropper>

            </div>

        </div>

        <div class="bottom-button">

            <div class="selectImg">

                <span class="text">选择图片</span>

                <input

                    type="file"

                    class="uploads"

                    accept="image/*"

                    @change="uploadImg($event)">

            </div>

            <div class="uploading" @click="down()">下载图片</div>

            <div class="uploading" @click="finish()">上传头像</div>

        </div>

    </div>

</template>

<script>

    import { VueCropper } from "vue-cropper";

    export default {

        name:'testHeadImg',

        components: {

            vueCropper: VueCropper

        },

        data() {

            return {

                headImg: "",

                //剪切图片上传

                crap: false,

                previews: {},

                option: {

                    img: "",

                    outputSize: 1, //剪切后的图片质量（0.1-1）

                    full: false, //输出原图比例截图 props名full

                    outputType: "png",

                    canMove: true,

                    original: false,

                    canMoveBox: false,

                    autoCrop: true,

                    fixedBox: true,

                    autoCropWidth: 200,

                    autoCropHeight: 150,

                },

                fileName: "", //本机文件地址

                imgFile:{},

                downImg: "#",

                uploadImgRelaPath: "" //上传后的图片的地址（不带服务器域名）

            };

        },

        methods: {

            //上传图片（点击上传按钮）

            finish() {

                let formData = new FormData();

                // 输出

                this.$refs.cropper.getCropBlob(data => {

                    let img = window.URL.createObjectURL(data);

                    console.log(img);

                    //下面这两个都可以

                    //formData.append("file", data, img);

                    formData.append("file", data, this.fileName);

                    this.$api.image(formData).then(res => {

                        let imgUrl=this.$resData(res);

                        if(imgUrl){

                            this.$api.modHeadPortrait({

                                headPortrait:imgUrl

                            }).then(res=>{

                                if(res.status===200){

                                    // this.getUserInfo();

                                    this.$toast({

                                        message:"修改头像成功"

                                    })

                                }else{

                                    this.$toast({

                                        message:"修改头像失败"

                                    })

                                }

                            })

                        }else{

                            this.$toast({

                                message:"网络请求失败"

                            })

                        }

                    });

                });

            },

            // 实时预览函数

            realTime(data) {

                console.log(data);

                this.previews = data;

            },

            //下载图片

            down() {

                let aLink = document.createElement("a");

                aLink.download = "author-img";

                this.$refs.cropper.getCropBlob(data => {

                    this.downImg = window.URL.createObjectURL(data);

                    aLink.href = window.URL.createObjectURL(data);

                    aLink.click();

                });

            },

            //选择本地图片

            uploadImg(event) {

                let imgFile={};

                let _this = this;

                //上传图片

                let file = event.target.files[0];

                imgFile =file;

                _this.imgFile=imgFile;

                _this.fileName = file.name;

                if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(event.target.value)) {

                    alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");

                    return false;

                }

                let reader = new FileReader();

                reader.onload = e => {

                    let data;

                    if (typeof e.target.result === "object") {

                        // 把Array Buffer转化为blob 如果是base64不需要

                        data = window.URL.createObjectURL(new Blob([e.target.result]));

                    } else {

                        data = e.target.result;

                    }

                    _this.option.img = data;

                    event.target.value = ''; //避免每次选择同样的文件时，input @change 方法不执行问题

                };

                // 转化为base64

                // reader.readAsDataURL(file)

                // 转化为blob

                reader.readAsArrayBuffer(file);

            }

        }

    };

</script>

<style lang="scss">

    // 底部按钮建

    .bottom-button {

        position: fixed;

        bottom: 0;

        width: 100%;

        height: 4rem;

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 0 1rem;

        box-sizing: border-box;

        text-align: center;

        .uploading {

            padding: 10px;

            // line-height: 2rem;

            background: #40ce53;

            color: white;

            border-radius: 4px;

            font-size: 15px;

        }

        .selectImg {

            width: 80px;

            height: 20px;

            line-height: 20px;

            padding: 10px;

            color: white;

            font-size: 15px;

            background: #65a2e7;

            border-radius: 4px;

            position: relative;

        }

        .text{

            position: absolute;

            z-index: 5;

            left: 15px;

        }

        .uploads {

            opacity: 0;

            position: absolute;

            z-index: 99;

            width: 100%;

            height: 100%;

            cursor: pointer;

        }

    }

    //改变背景色

    .cropper-box {

        background: #333 !important;

    }

    //使截图框变为圆形

    .cropper-crop-box {

        width: 200px !important;

        height: 200px !important;

        overflow: hidden;

        border-radius: 50% !important;

    }

    //截图相关样式

    .cropper-content {

        display: flex;

        display: -webkit-flex;

        justify-content: flex-end;

        -webkit-justify-content: flex-end;

        .cropper {

            width: 100%;

            height: 100%;

            position: absolute;

        }

        .show-preview {

            flex: 1;

            -webkit-flex: 1;

            display: flex;

            display: -webkit-flex;

            justify-content: center;

            -webkit-justify-content: center;

            .preview {

                overflow: hidden;

                border-radius: 50%;

                border: 1px solid #cccccc;

                background: #cccccc;

                margin-left: 40px;

            }

        }

    }

</style>

更完善的查看，有旋转、放大预览、裁剪、上传功能：https://www.jianshu.com/p/eab3a2f512bf