From 8676f4cb37ef31fa9fcfe2a7faf5f4c4ea77cc1a Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期四, 29 一月 2026 09:46:05 +0800
Subject: [PATCH] Merge branch 'master' of http://139.186.142.91:10010/r/productDev/zbom_dianjiang
---
admin/src/components/common/UploadImage.vue | 124 +++++++++++++++++------------------------
1 files changed, 51 insertions(+), 73 deletions(-)
diff --git a/admin/src/components/common/UploadImage.vue b/admin/src/components/common/UploadImage.vue
index 8ada0f0..d9237a4 100644
--- a/admin/src/components/common/UploadImage.vue
+++ b/admin/src/components/common/UploadImage.vue
@@ -8,32 +8,13 @@
accept=".jpg,.png"
:before-upload="beforeUpload"
:on-success="uploadSuccess"
+ :on-preview="handlePreview"
+ :on-remove="handleRemove"
:on-error="fail"
>
<i class="el-icon-plus icon"></i>
- <div slot="file" slot-scope="{file}">
- <img
- class="el-upload-list__item-thumbnail"
- :src="file.url" alt=""
- style="width: 100px;height: 100px;"
- >
- <span class="el-upload-list__item-actions">
- <span
- class="el-upload-list__item-preview"
- @click="handlePictureCardPreview(file)"
- >
- <i class="el-icon-zoom-in"></i>
- </span>
- <span
- class="el-upload-list__item-delete"
- @click="handleRemove(file)"
- >
- <i class="el-icon-delete"></i>
- </span>
- </span>
- </div>
</el-upload>
- <el-image-viewer
+ <el-image-viewer
v-if="showViewer"
:on-close="closeViewer"
:initialIndex="tempIndex"
@@ -55,79 +36,77 @@
type: Array,
default: () => []
},
- uploadData: Object,
+ maxNum: {
+ type: Number,
+ default: () => null
+ },
+ uploadData: Object
},
- data() {
+ data () {
return {
- uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/web/public/uploadLocal',
+ uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/upload',
realList: [],
- srcList: [],
+ // srcList: [],
tempIndex: 0,
- showViewer: false,
+ showViewer: false
+ }
+ },
+ computed:{
+ srcList(){
+ return this.fileList.map(item => { return item.url })
}
},
watch: {
- fileList: {
- handler(val) {
- console.log(val);
- if (val.length==0) {
- this.realList = []
- this.srcList = []
- }
- }
-
- }
},
methods: {
- beforeUpload(file) {
+ handlePreview(file) {
+ // console.log('棰勮鏂囦欢锛�', file,this.fileList);
+ this.tempIndex = this.srcList.findIndex(item => item == file.url)
+ this.showViewer = true
+ },
+ beforeUpload (file) {
this.$emit('beginUpload')
+ const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png'
+ const isLt2M = file.size / 1024 / 1024 < 1; // 500kb
+ if (!isJPGOrPNG) {
+ this.$message.error('涓婁紶澶村儚鍥剧墖鍙兘鏄� JPG/PNG 鏍煎紡!');
+ return false
+ }
+ if (!isLt2M) {
+ this.$message.error('涓婁紶澶村儚鍥剧墖澶у皬涓嶈兘瓒呰繃 500KB!');
+ return false
+ }
return true
},
- // 涓婁紶鍥剧墖鎴愬姛
- uploadSuccess (res, file, fileList) {
- // console.log('this.fileList', this.fileList);
- // console.log('fileList', fileList);
- this.$emit('uploadEnd')
- this.realList = fileList
- this.srcList.push(res.data.url)
- // console.log('file', file);
+ // 涓婁紶鍥剧墖鎴愬姛
+ uploadSuccess (res, file, fileList) {
+ this.$emit('endUpload')
+ console.log('涓婁紶鎴愬姛1锛�',fileList);
if (res.code === 200) {
- this.fileList.push(
- {
- fileurl: res.data.imgaddr,
- name: res.data.originname,
- url: res.data.url
- }
- )
+ this.fileList.push({
+ fileurl: res.data.imgaddr,
+ name: res.data.originname,
+ url: res.data.url
+ })
+ console.log('涓婁紶鎴愬姛2锛�', this.fileList);
} else {
this.$message.error(res.msg || '涓婁紶澶辫触')
}
},
fail (err, file, fileList) {
- this.$emit('uploadEnd')
+ this.$emit('endUpload')
this.$message.error('涓婁紶澶辫触')
},
- handlePictureCardPreview(file) {
- // this.tempIndex = this.srcList.findIndex(item => item == file.response.data.url )
- // console.log(file);
- this.tempIndex = this.fileList.findIndex(item => item.url == file.url )
- // console.log( this.tempIndex);
- this.srcList = this.fileList.map(item => item.url)
- this.showViewer = true
- },
- closeViewer() {
+ closeViewer () {
this.showViewer = false
},
- handleRemove(file) {
- console.log(this.fileList);
- let tempIndex = this.realList.findIndex(item => item.url === file.url)
- // debugger
- this.realList.splice(tempIndex, 1)
- this.fileList.splice(tempIndex, 1)
- this.srcList.splice(tempIndex, 1)
-
+ handleRemove (file) {
+ const tempIndex = this.fileList.findIndex(item => item.url === file.url)
+ if(tempIndex >= 0){
+ this.fileList.splice(tempIndex, 1)
+ }
}
- },
+ }
}
</script>
@@ -150,4 +129,3 @@
height: 90px !important;
}
</style>
-
--
Gitblit v1.9.3