添加缩略图，和上传图片的组件，上传图片的组件我是从 vue-element-admin 中进行拷贝过来的，如果你想使用和我不同的上传组件可以自行去弄一个，我的话就使用 vue-element-admin 提供的了，下载 vue-element-admin

下载地址：​​https://github.com/PanJiaChen/vue-element-admin​​

创作者前端-头像上传前端_显示图片

创作者前端-头像上传前端_显示图片_02

在添加创作者页面当中导入该组件

创作者前端-头像上传前端_上传_03

 import imageCropper from "@/components/ImageCropper";
import panThumb from "@/components/PanThumb";
components: {imageCropper, panThumb},

修改添加页面，添加缩略图

创作者前端-头像上传前端_显示图片_04

<el-form-item>
  <pan-thumb :width="String('100px')" :height="String('100px')" :image="String(author.avatar)"/>
</el-form-item>

上传文件

上传界面

创作者前端-头像上传前端_Project_05

<el-form-item>
  <pan-thumb :width="String('100px')" :height="String('100px')" :image="String(author.avatar)"/>

  <el-button type="primary" @click="imageCropperShow=true">上传头像</el-button>
  <!--
  上传头像的界面
  -->
  <image-cropper
    v-show="imageCropperShow"
    :width="500"
    :height="300"
    :key="cropperKey"
    :url="BASE_API+'/service_upload/file/uploadOssFile'"
    field="file"
    @close="close"
    @crop-upload-success="cropSuccess"
  />
</el-form-item>

事件处理

创作者前端-头像上传前端_显示图片_06

data() {
  return {
    author: {
      // 排序默认值
      sort: 0,
      level: 1
    },
    imageCropperShow: false,
    cropperKey: 0,
    BASE_API: process.env.VUE_APP_BASE_API
  }
},

创作者前端-头像上传前端_Project_07

close() {
  // 关闭弹框
  this.imageCropperShow = false;
  // 该代码可以清空上传组件的默认样式，也就是说每次弹出来的窗口都是新的
  this.cropperKey = this.cropperKey + 1;
},
cropSuccess(data) {
  // 关闭弹框
  this.imageCropperShow = false;
  // 显示图片
  this.author.avatar = data.url;

  this.cropperKey = this.cropperKey + 1;
}

如上内容都完成好了之后，测试上传效果图如下所示

创作者前端-头像上传前端_Project_08