基于Vue+iview的头像剪切上传vue-cropper

写项目的时候遇到了一个头像的更改，也就是要对要上传的图片进行裁剪，然后再上传；
默认已经安装了iview

安装

npm install vue-cropper  -Save

使用

在要使用的页面的template中引入

 <Modal
    v-model="modal1"
        title="操作图片"
        :loading="loading"
        @on-ok="uploadAvatar">
        <div class="cropper">
             <vueCropper
                ref="cropper"
                :img="option.img"
                :outputSize="option.size"
                :outputType="option.outputType"
                :info="true"
                :full="option.full"
                :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"
                @realTime="realTime"
            ></vueCropper>
        </div><!--cropper-->
    </Modal>

利用iview的upload组件触发模态框然后对图片剪裁，（下面的代码也是在template中的）其中handleFormatError，handleMaxSize方法就不给出了，就是对图片的格式和大小进行验证；

 <Upload
                ref="upload"
                :show-upload-list="false"
                :on-success="handleSuccess"
                :format="['jpg','jpeg','png']"
                :max-size="2048"
                :on-format-error="handleFormatError"
                :on-exceeded-size="handleMaxSize"
                :before-upload="handeleBeforeUpload"
                type="drag"
                accept="image/*"
                action=" "
                style="display: inline-block;width:58px;">
                <div style="width: 58px;height:58px;line-height: 58px;">
                    <Icon type="ios-camera" size="20"></Icon>
                </div>
            </Upload>

在图片上传前会触发钩子函数handeleBeforeUpload这个函数的具体代码如下

 handeleBeforeUpload(file){
     this.fileinfo =file
      let data = window.URL.createObjectURL(new Blob([file]));
      this.option.img = data
      this.modal1 = true
      return false;//取消自动上传
  },

在要使用的页面的script中引入

import { VueCropper } from "vue-cropper";
 export default {
        data(){
            return{
                modal1: false,
               option: {
                    img: '', // 裁剪图片的地址
                    info: true, // 裁剪框的大小信息
                    outputSize: 0.8, // 裁剪生成图片的质量
                    outputType: 'png', // 裁剪生成图片的格式
                    canScale: false, // 图片是否允许滚轮缩放
                    autoCrop: true, // 是否默认生成截图框
                    // autoCropWidth: 300, // 默认生成截图框宽度
                    // autoCropHeight: 200, // 默认生成截图框高度
                    fixedBox: true, // 固定截图框大小 不允许改变
                    fixed: true, // 是否开启截图框宽高固定比例
                    fixedNumber: [1, 1], // 截图框的宽高比例
                    full: true, // 是否输出原图比例的截图
                    canMoveBox: false, // 截图框能否拖动
                    original: false, // 上传图片按照原始比例渲染
                    centerBox: false, // 截图框是否被限制在图片里面
                    infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
                },
                fileinfo:'',
                // 防止重复提交
                loading: false
            }
        },
        components:{
            VueCropper,
        },

上传

点击模态框的确认按钮开始把剪切后的图片上传

 uploadAvatar() {
                let that = this
                this.$refs.cropper.getCropBlob((data) => {
                    that.loading = true
                    that.$refs.upload.clearFiles() 
                    let formData=new FormData();
                    formData.append('avatar',data)
                    that.$axios.post('/api/manage/avatar/update',formData,{
                        'Content-Type':'multipart/form-data'
                    }).then(res=>{
                        that.loading = false
                       if(res.data.err_code == 0){
                            that.$router.push('/login')
                        }else if(res.data.err_code == 1){
                            that.$Message.success('修改成功！')
                            that.changeAvatar({Avatar:res.data.data.slice(1)})
                        }else{
                            that.$Message.error('服务器出错！')
                        }
                    
                    })

                })
            },

注意一下：加上样式.cropper { width: auto; height: 300px; }要不然可以能显示不出图片。
上传成功返回url保存到vuex中，供页面使用