update

src/components/upload/UploadAvatar.vue

@@ -1,74 +1,56 @@
 <script setup>
-import {ref} from "vue";
-import {BASEURL} from "../../utils/request.js";
-import {useUserStore} from "../../pinia/UserStore/index.js";
+import XImage from "../XImage/Index.vue";
+import Api from "../../api/index.js";
 
-const UserStore = useUserStore();
-const file = ref();
-const url = defineModel();
+const {size, api} = defineProps({
+    size: {
+        type: String,
+        default: '60px'
+    },
+    api: {
+        type: Function,
+        default: Api.system.uploadFile,
+    }
+});
+const files = defineModel('files');
+const emits = defineEmits(['success']);
 
-const onChange = (_, currentFile) => {
-    if (currentFile.value.response && currentFile.value.response?.data) url.value = currentFile.value.response?.data;
-    file.value = {
-        ...currentFile,
-        // url: URL.createObjectURL(currentFile.file),
-    };
-};
-const onProgress = (currentFile) => {
-    file.value = currentFile;
-};
+const beforeUpload = (file) => {
+    api(file).then(({data}) => {
+        files.value.push(data);
+        emits('success', data);
+    });
+    return false;
+}
 </script>
 
 <template>
-    {{ url }}
-    <a-upload
-        :action="BASEURL + '/admin/upload/upload'"
-        :fileList="file ? [file] : []"
-        :show-file-list="false"
-        :headers="{
-            'Access-Token': UserStore.token
-        }"
-        @change="onChange"
-        @progress="onProgress"
-    >
-        <template #upload-button>
-            <div
-                :class="`arco-upload-list-item${
-            file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
-          }`"
-            >
-                <div
-                    class="arco-upload-list-picture custom-upload-avatar"
-                    v-if="file && file.url"
-                >
-                    <img :src="file.url"/>
-                    <div class="arco-upload-list-picture-mask">
-                        <IconEdit/>
-                    </div>
-                    <a-progress
-                        v-if="file.status === 'uploading' && file.percent < 100"
-                        :percent="file.percent"
-                        type="circle"
-                        size="mini"
-                        :style="{
-                position: 'absolute',
-                left: '50%',
-                top: '50%',
-                transform: 'translateX(-50%) translateY(-50%)',
-              }"
-                    />
+    <div class="flex flex-wrap gap-[15px]">
+        <a-upload :style="{width: size,height: size}" @before-upload="beforeUpload" multiple>
+            <template #upload-button>
+                <div class="upload-button test">
+                    <IconPlus/>
+                    上传
                 </div>
-                <div class="arco-upload-picture-card" v-else>
-                    <div class="arco-upload-picture-card-text">
-                        <IconPlus/>
-                        <div style="margin-top: 10px; font-weight: 600">Upload</div>
-                    </div>
-                </div>
-            </div>
-        </template>
-    </a-upload>
+            </template>
+        </a-upload>
+
+        <x-image
+            @delete="files.splice(index,1)"
+            :width="size"
+            :height="size"
+            :key="index"
+            :src="v"
+            v-for="(v, index) in files">
+        </x-image>
+    </div>
 </template>
 
 <style scoped lang="scss">
-
+.upload-button {
+    width: v-bind(size);
+    height: v-bind(size);
+    border: 1px dashed rgb(229, 230, 235);
+    @apply flex flex-col justify-center items-center bg-[#F2F3F5] hover:bg-[#ddd] duration-300;
+}
 </style>

src/components/upload/UploadButton.vue

@@ -0,0 +1,30 @@
+<script setup>
+import Api from "../../api/index.js";
+
+const {api} = defineProps({
+    api: {
+        type: Function,
+        default: Api.system.uploadFile,
+    }
+});
+const emits = defineEmits(['success']);
+
+const beforeUpload = (file) => {
+    api(file).then(({data}) => {
+        emits('success', data);
+    });
+    return false;
+}
+</script>
+
+<template>
+    <a-upload @before-upload="beforeUpload" v-bind="$attrs">
+        <template #upload-button>
+            <slot name="upload-button"></slot>
+        </template>
+    </a-upload>
+</template>
+
+<style scoped lang="scss">
+
+</style>