designer-hub/packages/app/src/components/upload-evo.vue

<script setup lang="ts">
// defineProps<>()
const modelValue = defineModel({ type: String, default: '' })
const props = defineProps<{ multiple?: boolean; limit?: number; disabled?: boolean }>()
const fileList = ref([])
const action = ref(`${import.meta.env.VITE_SERVER_BASEURL}/app-api/infra/file/upload`)
const fileUrls = computed(() => fileList.value.map(({ response }) => JSON.parse(response).data))
const handleChange = ({ fileList: files }) => {
  fileList.value = files
  console.log(fileList.value)
  console.log(fileUrls.value)
  if (!props.multiple) {
    modelValue.value = fileUrls.value[0] || ''
  }
}
watch(
  () => fileList,
  () => {
    // console.log(modelValue.value)
  },
)
onMounted(() => {
  // console.log(modelValue.value)

  if (typeof modelValue.value === 'string' && (modelValue.value ?? '') !== '') {
    fileList.value = [{ url: modelValue.value }]
  }
  // console.log(fileList.value)
})
</script>
<template>
  <wd-upload
    :disabled="disabled"
    :file-list="fileList"
    image-mode="aspectFill"
    :action="action"
    :multiple="multiple ?? false"
    :limit="limit ?? 1"
    @change="handleChange"
  ></wd-upload>
</template>