update

src/components/XUpload.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import ADDICON from "../static/icons/add.png";
+import {uploadFile} from "../utils/uils";
+import XImage from "./XImage.vue";
+
+const {size} = defineProps({
+    size: {
+        type: String,
+        default: "160rpx"
+    }
+});
+const emits = defineEmits(['success']);
+const files = defineModel('files');
+
+const upload = async () => {
+    uploadFile({
+        count: 1,
+    }).then(({data}) => {
+        files.value.push(data);
+        emits('success', data);
+    })
+}
+</script>
+
+<template>
+    <view class="!flex gap-[12rpx] flex-wrap">
+        <view class="x-upload" @click="upload">
+            <image class="!size-[28rpx]" :src="ADDICON"></image>
+            <view>上传图片</view>
+        </view>
+
+        <x-image
+            :style="{
+            width: size,
+            height: size,
+        }"
+            class="border border-[rgb(229,230,235)]"
+            v-for="v in files"
+            :src="v"
+            :list="[v]"
+            :key="v">
+        </x-image>
+    </view>
+</template>
+
+<style scoped lang="scss">
+.x-upload {
+    border: 1px dashed rgb(229, 230, 235);
+    background-color: #F2F3F5;
+    width: v-bind(size);
+    height: v-bind(size);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 22rpx;
+    font-size: 24rpx;
+    border-radius: 4px;
+}
+</style>