admin/src/components/ImageUpload.vue

<script setup lang="ts">
import { MessagePlugin, type UploadProps } from 'tdesign-vue-next'
import { ref, watch } from 'vue'
import { useAppStore } from '@/stores/app'
const imageViewerProps = ref<UploadProps['imageViewerProps']>({
  closeOnEscKeydown: false,
});
const sizeLimit = ref<UploadProps['sizeLimit']>({
  size: 2,
  unit: 'MB',
});
const file1 = ref<UploadProps['value']>([]);
const disabled = ref<boolean>(false);
const autoUpload = ref<boolean>(true);
const showImageFileName = ref<boolean>(true);
const uploadAllFilesInOneRequest = ref<boolean>(false);
const handleFail: UploadProps['onFail'] = ({ file }) => {
  MessagePlugin.error(`文件 ${file.name} 上传失败`);
};
const handleSuccess: UploadProps['onSuccess'] = ({ file }) => {
  if(file?.url){
    console.log(file1.value,'file1')
    emits('on-success',file.url)
  }
}
const appStore = useAppStore()

const uploadHeaders = ref<UploadProps['headers']>({
  Authorization: `Bearer ${appStore.token}`
})
const props = defineProps({
  imageUrl:{
    type:Object,
    default:() => {
      return { url: '' }
    }
  }
})

const emits = defineEmits(['on-success'])
watch(() => props.imageUrl,(newVal) => {
  if(newVal){
    if(newVal.url !== ''){
      file1.value = [{ ...newVal }]
    }else{
      file1.value = []
    }
  }
},{
  deep:true,
  immediate:true
})
</script>

<template>
  <div>
    <t-upload
      ref="uploadRef1"
      v-model="file1"
      :image-viewer-props="imageViewerProps"
      :size-limit="sizeLimit"
      action="/api/files/upload"
      :headers="uploadHeaders"
      theme="image"
      tips="图片上传限制为2M"
      accept="image/*"
      :disabled="disabled"
      :auto-upload="autoUpload"
      :show-image-file-name="showImageFileName"
      :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
      :locale="{
          triggerUploadText: {
            image: '请选择图片',
          },
        }"
      @fail="handleFail"
      @success="handleSuccess"
    >
      <!-- custom UI -->
      <!-- <template #fileListDisplay="{ files }">
        <div>{{ JSON.stringify(files) }}</div>
      </template> -->
    </t-upload>
  </div>
</template>

<style scoped>

</style>