|
|
@@ -10,12 +10,17 @@
|
|
|
:before-upload="beforeAvatarUpload"
|
|
|
>
|
|
|
<template v-if="multiple">
|
|
|
- <img v-for="(img,idx) in showImageList" :key="idx" :src="img" class="avatar"/>
|
|
|
+ <div v-for="(img,idx) in showImageList" :key="idx" class="hp" style="display: block;">
|
|
|
+ <SvgIcon name="ele-CircleCloseFilled" color="red" class="hc" style="position: absolute;top:2px;" @click.stop="handleRemove(idx)"></SvgIcon>
|
|
|
+ <img :src="img" class="avatar"/>
|
|
|
+ </div>
|
|
|
+
|
|
|
<el-icon v-if="showImageList.length<max" class="avatar-uploader-icon">
|
|
|
<Plus/>
|
|
|
</el-icon>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
+ <SvgIcon name="ele-Remove"></SvgIcon>
|
|
|
<img v-if="showImageList[0]" :src="showImageList[0]" class="avatar"/>
|
|
|
<el-icon v-else class="avatar-uploader-icon">
|
|
|
<Plus/>
|
|
|
@@ -26,11 +31,10 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import {ref, reactive, onMounted, watch, computed} from 'vue'
|
|
|
+import {computed, onMounted, reactive, ref, watch} from 'vue'
|
|
|
+import type {UploadProps} from 'element-plus'
|
|
|
import {ElMessage} from 'element-plus'
|
|
|
import {Plus} from '@element-plus/icons-vue'
|
|
|
-
|
|
|
-import type {UploadProps} from 'element-plus'
|
|
|
import {Session} from "/@/utils/storage";
|
|
|
import u from "/@/utils/u"
|
|
|
import {Msg} from "/@/utils/message";
|
|
|
@@ -88,6 +92,11 @@ watch(() => props.modelValue, (nv, v) => {
|
|
|
}, {immediate: true})
|
|
|
|
|
|
|
|
|
+const handleRemove = (idx: number) => {
|
|
|
+ state.imageList.splice(idx, 1);
|
|
|
+ emitData()
|
|
|
+}
|
|
|
+
|
|
|
const showImageList = computed(() => {
|
|
|
return state.imageList.map((k: string) => u.fmt.fmtUrl(k))
|
|
|
}
|
|
|
@@ -98,7 +107,7 @@ onMounted(() => {
|
|
|
if (!url) {
|
|
|
url = `${location.origin}/admin/`;
|
|
|
}
|
|
|
- state.action = `${url}file/upload`
|
|
|
+ state.action = `${url}/file/upload`
|
|
|
state.headers = {"accessToken": Session.get("accessToken")}
|
|
|
})
|
|
|
|
