Vue - 个人中心头像上传

1、下载vue-cropper

npm install vue-cropper

2、引入下载的vue-cropper

import { VueCropper } from ‘vue-cropper’
components: {
VueCropper
},

<template>
  <div>
    <!--imgShow 替换  {
   {
    options.img }} -->
    <div class="user-info-head" @click="editCropper()">
      <img
        v-bind:src="imgShow"
        title="点击上传头像"
        class="img-circle img-lg"
      />
    </div>
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="800px"
      append-to-body
      @opened="modalOpened"
      @close="closeDialog()"
    >
      <el-row>
        <el-col :xs="24" :md="12" :style="{ height: '350px' }">
          <vue-cropper
            ref="cropper"
            :img="imgShow"
            :info="true"
            :autoCrop="options.autoCrop"
            :autoCropWidth="options.autoCropWidth"
            :autoCropHeight="options.autoCropHeight"
            :fixedBox="options.fixedBox"
            @realTime="realTime"
            v-if="visible"
          />
        </el-col>
        <el-col :xs="24" :md="12" :style="{ height: '350px' }">
          <div class="avatar-upload-preview">
            <img :src="previews.url" :style="previews.img" />
          </div>
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :lg="2" :md="2">
          <el-upload