4.头像上传(前端)

(1)ui组件

我们使用现有组件来实现头像上传，我们之前下载使用的vue-admin-template-master仅仅100多kb，还有一个vue-element-admin-master有900多kb，功能更加齐全，我们从这个组件的src/components中找到组件ImageCropper与PanThumb，复制到项目的src/components目录。

image-20211103200856025

save.vue中。

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

在save.vue在对上面ui代码使用到的变量赋初始值。

 imagecropperShow:false, // 头像上传的弹框是否默认打开
 imagecropperKey: 0, // 标识符
 BASE_API: process.env.BASE_API, //从dev.env.js中获取

声明组件绑定的方法。

  close() {

  },
  cropSuccess() {

  },

如下图。

image-20211103204010833

引入组件。

//引入头像组件
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

声明组件。

export default {
  //声明引入的组件
  components:{ImageCropper,PanThumb},
    ...
    
}

启动前后端与ngnix，效果如下。

image-20211103210836629

(2)功能实现

先修改前端的url

 <image-cropper
                              v-show="imagecropperShow"
                              :width="300"
                              :height="300"
                              :key="imagecropperKey"
                              :url="BASE_API + 'eduoss/fileoss/uploadOssFile'"  //改为后端接口
                              field="file"
                              @close="close"
                              @crop-upload-success="cropSuccess"
                              />

实现图片上传功能。

    close(){ //关闭上传弹框的方法
      this.imagecropperShow=false;
      //上传组件初始化
      this.imagecropperKey = this.imagecropperKey+1
    },
    cropSuccess(data){ //上传成功的方法
      this.imagecropperShow=false;
      // 组件封装了response.data,这里可以直接用data拿到后端数据
      this.teacher.avatar = data.url
      this.imagecropperKey = this.imagecropperKey+1
    }

xdm，好看不。

image-20211103212423337