From 920ad7c1062549f8ff6e5034f84a90c725dc89dd Mon Sep 17 00:00:00 2001
From: doum <doum>
Date: 星期二, 23 九月 2025 16:40:27 +0800
Subject: [PATCH] H5静态化
---
admin/src/components/common/UploadFaceImg.vue | 206 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 206 insertions(+), 0 deletions(-)
diff --git a/admin/src/components/common/UploadFaceImg.vue b/admin/src/components/common/UploadFaceImg.vue
new file mode 100644
index 0000000..98e2dd1
--- /dev/null
+++ b/admin/src/components/common/UploadFaceImg.vue
@@ -0,0 +1,206 @@
+<template>
+ <div>
+ <el-upload
+ class="avatar-uploader"
+ accept=".png,.jpg,.jpeg"
+ :style="customStyle"
+ action=""
+ :auto-upload="false"
+ :show-file-list="false"
+ :on-change='openUpdateIcon'>
+ <img v-if=" file.imgurlfull" style="width: 100%;" :src="file.imgurlfull" :style="customStyle" class="avatar">
+ <div v-else :style="customStyle">
+ <i class="el-icon-plus avatar-uploader-icon"></i>
+ <div class="tips-style">{{ tipsLabel }}</div>
+ </div>
+ </el-upload>
+ <el-dialog
+ append-to-body
+ :close-on-click-modal="false"
+ title="涓婁紶鍥剧墖"
+ :visible.sync="updateImg"
+ width="1000px"
+ class="icon-dialog-wrapper dialong-com-style">
+ <ImageCropper ref="iconShot" v-if="updateImg" :imgSrc="img" >
+ </ImageCropper>
+ <span slot="footer" class="dialog-footer">
+ <el-button v-if="loading">鍙� 娑�</el-button>
+ <el-button v-else @click="updateImg = false">鍙� 娑�</el-button>
+ <el-button :loading="loading" type="primary" @click="uploadIcon">纭� 瀹�</el-button>
+ </span>
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+import ImageCropper from '@/components/common/ImageCropper'
+import { upload } from '@/api/system/common'
+export default {
+ components: { ImageCropper },
+ props: {
+ file: {
+ type: Object,
+ default: () => {}
+ },
+ tipsLabel: '',
+ customStyle: {
+ type: String,
+ default: 'width: 90px; height: 90px;'
+ },
+ uploadData: Object
+ },
+ data () {
+ return {
+ loading: false,
+ fileInfo:{},
+ img: null,
+ updateImg: false,
+ imageSrc: null,
+ uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/public/upload'
+ }
+ },
+
+ methods: {
+ uploadIcon () {
+ // 鑾峰彇瑁佸壀鍚庣殑鍥剧墖
+ this.$refs.iconShot.getImagecropper().getCropBlob((fileData) => { // 鑾峰彇褰撳墠瑁佸壀濂界殑鏁版嵁
+ // 娉ㄦ鏃剁殑data鏄竴涓狟lob鏁版嵁锛岄儴鍒嗘帴鍙ｆ帴鏀剁殑鏄疐ile杞寲鐨凢ormData鏁版嵁
+ console.log(fileData)
+ const formData = new FormData()
+
+ formData.append('folder', 'member')
+ if(this.uploadData.isFace || this.uploadData.isFace == 0){
+ formData.append('isFace', 0)
+ }
+ formData.append(
+ 'file',
+ new File(
+ [fileData], // 灏咮lob绫诲瀷杞寲鎴怓ile绫诲瀷
+ this.fileInfo.name, // 璁剧疆File绫诲瀷鐨勬枃浠跺悕绉�
+ { type: this.fileInfo.type } // 璁剧疆File绫诲瀷鐨勬枃浠剁被鍨�
+ )
+ )
+ this.loading = true
+ upload(formData).then(res => {
+ this.loading = false
+ console.log(res)
+ this.file.imgurl = res.imgaddr
+ this.file.imgurlfull = res.url
+ this.$message.success('涓婁紶鎴愬姛')
+ this.imageSrc = res.url
+ this.updateImg = false
+ this.$emit('uploadSuccess', { imgurl: res.imgaddr, imgurlfull: res.url, name: res.originname })
+ this.$emit('uploadEnd')
+ }, () => {
+ this.loading = false
+ })
+ })
+ },
+
+ // 涓婁紶鍥剧墖
+ openUpdateIcon (file, fileList) {
+ const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png'
+ const isLt2M = file.size / 1024 / 1024 < 5
+ if (!isJPG) {
+ this.$message.error('涓婁紶澶村儚鍥剧墖鍙兘鏄� JPG/PNG 鏍煎紡!')
+ return false
+ }
+ if (!isLt2M) {
+ this.$message.error('涓婁紶澶村儚鍥剧墖澶у皬涓嶈兘瓒呰繃 5MB!')
+ return false
+ }
+ // 涓婁紶鎴愬姛鍚庡皢鍥剧墖鍦板潃璧嬪�肩粰瑁佸壀妗嗘樉绀哄浘鐗�
+ this.$nextTick(async () => {
+ // base64鏂瑰紡
+ // this.option.img = await fileByBase64(file.raw)
+ this.fileInfo.name = file.name
+ this.fileInfo.type = file.type
+ console.log(file, fileList)
+ this.img = URL.createObjectURL(file.raw)
+ // this.loading = false
+ this.updateImg = true
+ })
+ },
+ handleAvatarSuccess (res, file) {
+ if (res.code == 200) {
+ const { data } = res
+ this.file.imgurl = data.imgaddr
+ this.file.imgurlfull = data.url
+ this.$message.success('涓婁紶鎴愬姛')
+ this.imageSrc = data.url
+ this.updateImg = true
+ // this.$emit('uploadSuccess', { imgurl: data.imgaddr, imgurlfull: data.url, name: data.originname })
+ } else {
+ this.$message.error('涓婁紶澶辫触')
+ }
+ this.$emit('uploadEnd')
+ },
+ uploadError () {
+ this.$message.error('涓婁紶澶辫触')
+ this.$emit('uploadEnd')
+ },
+ // // 鎷︽埅
+ beforeAvatarUpload (file) {
+ this.$emit('uploadBegin')
+ return true
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+$image-width: 90px;
+.avatar-uploader {
+ width: $image-width;
+ height: $image-width;
+}
+::v-deep .el-upload {
+ border: 1px dashed #d9d9d9;
+ border-radius: 6px;
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+ border-color: #409EFF;
+}
+.avatar-uploader-icon {
+ line-height: 90px;
+ font-size: 28px;
+ color: #8c939d;
+ width: $image-width;
+ height: $image-width;
+ text-align: center;
+}
+.avatar {
+ width: 100% !important;
+ height: auto !important;
+ display: block;
+}
+.tips-style {
+ height: 13px;
+ font-size: 13px;
+ font-weight: 400;
+ color: #999999;
+ line-height: 13px;
+}
+</style>
+<style lang="scss" scoped>
+::v-deep .el-upload--picture-card{
+ width: 90px !important;
+ height: 90px !important;
+}
+::v-deep .el-upload-list__item {
+ width: 90px !important;
+ height: 90px !important;
+}
+.icon {
+ -webkit-transform: translate(-50%,-50%);
+ -ms-transform: translate(-50%,-50%);
+ transform: translate(0%, -85%);
+}
+::v-deep .el-upload-list__item {
+ width: 90px !important;
+ height: 90px !important;
+}
+</style>
--
Gitblit v1.9.3