復(fù)制頭像上傳組件

從vue-element-admin復(fù)制組件：

vue-element-admin/src/components/ImageCropper

vue-element-admin/src/components/PanThumb

前端參考實現(xiàn)

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，如果一個頁面多個圖片上傳控件，可以做區(qū)分 :url：后臺上傳的url地址 @close：關(guān)閉上傳組件 @crop-upload-success：上傳成功后的回調(diào) --><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'

設(shè)置默認(rèn)頭像

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

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

組件中初始化頭像默認(rèn)地址

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

js腳本實現(xiàn)上傳和圖片回顯

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

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。