技術標籤：vue頭像上傳元件實現

其中注意的是需要引入兩個元件：

vue頁面的寫法；

<template>
  <div>
    <!-- 講師頭像：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+'/ossservice/file/uploadFile'"
            field="file"
            @close="close"
            @crop-upload-success="cropSuccess"/>
    </el-form-item>
  </div>
</template>
<script>

// 引入頭像上傳元件
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

export default {
  components: { ImageCropper, PanThumb }, // 載入components 的元件
  data(){
    return {
      teacher:{
        avatar:''
      },
      saveBtnDisabled : false,
     
      // 上傳頭像需要的引數-0·  
      imagecropperShow:false, // 是否顯示上傳元件
      imagecropperKey:0, // 上傳元件id ，要變化
      BASE_API:process.env.BASE_API, // 介面API地址
    }
  },
  created(){
   
  },
  methods:{
    // 上傳成功後的回撥函式
    cropSuccess(data) {
      console.log(data)
      this.imagecropperShow = false
      this.teacher.avatar = data.url
      // 上傳成功後，重新開啟上傳元件時初始化元件，否則顯示上一次的上傳結果
      this.imagecropperKey = this.imagecropperKey + 1
    },
    // 關閉上傳元件
    close() {
      this.imagecropperShow = false
      // 上傳失敗後，重新開啟上傳元件時初始化元件，否則顯示上一次的上傳結果
      this.imagecropperKey = this.imagecropperKey + 1
    }
  }
}
</script>
 

效果展示