一、前端整合图片上传组件

1、复制头像上传组件

从vue-element-admin复制组件：
vue-element-admin/src/components/ImageCropper
vue-element-admin/src/components/PanThumb

2、前端参考实现

src/views/components-demo/avatarUpload.vue

3、前端添加文件上传组件

src/views/edu/teacher/form.vue
template：

  1. <!-- 讲师头像 -->
  2. <el-form-item label="讲师头像">
  3.     <!-- 头衔缩略图 -->
  4.     <pan-thumb :image="teacher.avatar"/>
  5.     <!-- 文件上传按钮 -->
  6.     <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
  7.     </el-button>
  8.     <!--
  9. v-show：是否显示上传组件
  10. :key：类似于id，如果一个页面多个图片上传控件，可以做区分
  11. :url：后台上传的url地址
  12. @close：关闭上传组件
  13. @crop-upload-success：上传成功后的回调 -->
  14.     <image-cropper
  15.                    v-show="imagecropperShow"
  16.                    :width="300"
  17.                    :height="300"
  18.                    :key="imagecropperKey"
  19.                    :url="BASE_API+'/admin/oss/file/upload'"
  20.                    field="file"
  21.                    @close="close"
  22.                    @crop-upload-success="cropSuccess"/>
  23. </el-form-item>

引入组件模块

  1. import ImageCropper from '@/components/ImageCropper'
  2. import PanThumb from '@/components/PanThumb'

4、设置默认头像

config/dev.env.js中添加阿里云oss bucket地址

  1. OSS_PATH: '"https://guli-file.oss-cn-beijing.aliyuncs.com"'

组件中初始化头像默认地址

  1. const defaultForm = {
  2.   ......,
  3.   avatar: process.env.OSS_PATH + '/avatar/default.jpg'
  4. }

5、js脚本实现上传和图片回显

  1. export default {
  2.   components: { ImageCropper, PanThumb },
  3.   data() {
  4.     return {
  5.       //其它数据模型
  6.       ......,
  8.       BASE_API: process.env.BASE_API, // 接口API地址
  9.       imagecropperShow: false, // 是否显示上传组件
  10.       imagecropperKey: 0 // 上传组件id
  11.     }
  12.   },
  14.   ......,
  16.   methods: {
  17.     //其他函数
  18.     ......,
  19.     // 上传成功后的回调函数
  20.     cropSuccess(data) {
  21.       console.log(data)
  22.       this.imagecropperShow = false
  23.       this.teacher.avatar = data.url
  24.       // 上传成功后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
  25.       this.imagecropperKey = this.imagecropperKey + 1
  26.     },
  27.     // 关闭上传组件
  28.     close() {
  29.       this.imagecropperShow = false
  30.       // 上传失败后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
  31.       this.imagecropperKey = this.imagecropperKey + 1
  32.     }
  33.   }
  34. }

二、测试文件上传

前后端联调