From 089bf5d2378b3c4a61d795b2a92bede2c193b771 Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Tue, 06 Jan 2026 11:22:58 +0800
Subject: [PATCH] 1
---
src/components/mul-pic-upload/index.vue | 83 +++++++++++++++++++++++++++++++++++++++++
1 files changed, 83 insertions(+), 0 deletions(-)
diff --git a/src/components/mul-pic-upload/index.vue b/src/components/mul-pic-upload/index.vue
new file mode 100644
index 0000000..5f3ea4c
--- /dev/null
+++ b/src/components/mul-pic-upload/index.vue
@@ -0,0 +1,83 @@
+<template>
+ <div>
+ <el-upload
+ :action="$http.adornUrl('/admin/file/upload/element')"
+ :headers="{Authorization: $cookie.get('Authorization')}"
+ list-type="picture-card"
+ :on-preview="handlePictureCardPreview"
+ :on-remove="handleRemove"
+ :on-success="handleUploadSuccess"
+ :file-list="imageList"
+ :before-upload="beforeAvatarUpload">
+ <i class="el-icon-plus"></i>
+ </el-upload>
+ <el-dialog :visible.sync="dialogVisible">
+ <img width="100%" :src="dialogImageUrl" alt="">
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+ export default {
+ data () {
+ return {
+ dialogImageUrl: '',
+ dialogVisible: false,
+ resourcesUrl: process.env.VUE_APP_RESOURCES_URL
+ }
+ },
+ props: {
+ value: {
+ default: '',
+ type: String
+ }
+ },
+ computed: {
+ imageList () {
+ let res = []
+ if (this.value) {
+ let imageArray = this.value.split(',')
+ for (let i = 0; i < imageArray.length; i++) {
+ res.push({url: this.resourcesUrl + imageArray[i], response: imageArray[i]})
+ }
+ }
+ this.$emit('input', this.value)
+ return res
+ }
+ },
+ methods: {
+ // 图片上传
+ handleUploadSuccess (response, file, fileList) {
+ let pics = fileList.map(file => {
+ return file.response
+ }).join(',')
+ this.$emit('input', pics)
+ },
+ // 限制图片上传大小
+ beforeAvatarUpload (file) {
+ const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg'
+ if (!isJPG) {
+ this.$message.error('上传图片只能是jpeg/jpg/png/gif 格式!')
+ }
+ const isLt2M = file.size / 1024 / 1024 < 2
+ if (!isLt2M) {
+ this.$message.error('上传图片大小不能超过 2MB!')
+ }
+ return isLt2M && isJPG
+ },
+ handleRemove (file, fileList) {
+ let pics = fileList.map(file => {
+ return file.response
+ }).join(',')
+ this.$emit('input', pics)
+ },
+ handlePictureCardPreview (file) {
+ this.dialogImageUrl = file.url
+ this.dialogVisible = true
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+</style>
--
Gitblit v1.9.3