update

src/components/upload/UploadAvatar.vue

@@ -0,0 +1,74 @@
+<script setup>
+import {ref} from "vue";
+import {BASEURL} from "../../utils/request.js";
+import {useUserStore} from "../../pinia/UserStore/index.js";
+
+const UserStore = useUserStore();
+const file = ref();
+const url = defineModel();
+
+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;
+};
+</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>
+                <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>
+
+<style scoped lang="scss">
+
+</style>

src/components/upload/UploadOne.vue

@@ -1,6 +1,12 @@
 <script setup>
 import Api from "../../api/index.js";
 
+const {size} = defineProps({
+    size: {
+        type: String,
+        default: '100%'
+    }
+});
 const emits = defineEmits(['success']);
 const files = defineModel('file');
 
@@ -14,13 +20,57 @@ const beforeUpload = (file) => {
 </script>
 
 <template>
-    <a-upload draggable @before-upload="beforeUpload">
-        <template #upload-button v-if="files">
-            <a-image :src="files"></a-image>
-        </template>
-    </a-upload>
+    <div class="x-upload-one">
+        <a-upload draggable @before-upload="beforeUpload">
+            <template #upload-button v-if="files">
+                <div class="x-upload-one-image">
+                    <a-image :preview="false" :src="files"></a-image>
+                </div>
+            </template>
+        </a-upload>
+    </div>
 </template>
 
 <style scoped lang="scss">
+.x-upload-one {
+    width: v-bind(size);
+    height: v-bind(size);
 
+    :deep(.arco-upload-wrapper) {
+        width: v-bind(size);
+        height: v-bind(size);
+
+        .x-upload-one-image {
+            @apply border;
+            width: v-bind(size);
+            height: v-bind(size);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .arco-upload {
+            width: v-bind(size);
+            height: v-bind(size);
+
+            .arco-upload-drag {
+                padding: 0;
+                width: v-bind(size);
+                height: v-bind(size);
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+
+                .arco-upload-drag-text {
+                    padding: 0 5px;
+                }
+
+                svg {
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+}
 </style>