復制頭像上傳組件

從vue-element-admin復制組件：

vue-element-admin/src/components/ImageCropper

vue-element-admin/src/components/PanThumb

前端參考實現

src/views/components-demo/avatarUpload.vue

前端添加文件上傳組件

src/views/edu/teacher/form.vue

template：

<!-- 講師頭像 --> <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-cropperv-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>

引入組件模塊

import ImageCropper from '@/components/ImageCropper' import PanThumb from '@/components/PanThumb'

設置默認頭像

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

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

組件中初始化頭像默認地址

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

js腳本實現上傳和圖片回顯

export default {components: { ImageCropper, PanThumb },data() {return {//其它數據模型......,BASE_API: process.env.BASE_API, // 接口API地址imagecropperShow: false, // 是否顯示上傳組件imagecropperKey: 0 // 上傳組件id}},......,methods: {//其他函數......,// 上傳成功后的回調函數cropSuccess(data) {console.log(data)this.imagecropperShow = falsethis.teacher.avatar = data.url// 上傳成功后，重新打開上傳組件時初始化組件，否則顯示上一次的上傳結果this.imagecropperKey = this.imagecropperKey + 1},// 關閉上傳組件close() {this.imagecropperShow = false// 上傳失敗后，重新打開上傳組件時初始化組件，否則顯示上一次的上傳結果this.imagecropperKey = this.imagecropperKey + 1}} }

?

總結

以上是生活随笔為你收集整理的前端整合图片上传组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。