創作者前端-頭像上傳前端

添加縮略圖，和上傳圖檔的元件，上傳圖檔的元件我是從 vue-element-admin 中進行拷貝過來的，如果你想使用和我不同的上傳元件可以自行去弄一個，我的話就使用 vue-element-admin 提供的了，下載下傳 vue-element-admin

下載下傳位址：​​https://github.com/PanJiaChen/vue-element-admin​​

在添加創作者頁面當中導入該元件

import imageCropper from "@/components/ImageCropper";
import panThumb from "@/components/PanThumb";
      

components: {imageCropper, panThumb},      

修改添加頁面，添加縮略圖

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

上傳檔案

上傳界面

<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>      

事件處理

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

close() {
  // 關閉彈框
  this.imageCropperShow = false;
  // 該代碼可以清空上傳元件的預設樣式，也就是說每次彈出來的視窗都是新的
  this.cropperKey = this.cropperKey + 1;
},
cropSuccess(data) {
  // 關閉彈框
  this.imageCropperShow = false;
  // 顯示圖檔
  this.author.avatar = data.url;

  this.cropperKey = this.cropperKey + 1;
}