Tencent / tdesign-vue-next

A Vue3.x UI components lib for TDesign.
https://tdesign.tencent.com/vue-next
MIT License
1.46k stars 474 forks source link

[t-upload] 图片上传使用request-method返回的url是blob链接会导致loading图标一直展示中 #4753

Open mulingyuer opened 3 hours ago

mulingyuer commented 3 hours ago

tdesign-vue-next 版本

1.10.3

重现链接

No response

重现步骤

<template>
  <t-upload
      ref="uploadRef"
      v-model="img"
      theme="image"
      accept="image/*"
      :show-thumbnail="true"
      :draggable="draggable"
      :request-method="requestMethod"
    >
</template>

<script setup lang="ts">
import type { UploadFile, UploadInstanceFunctions, UploadProps } from "tdesign-vue-next";

const img = defineModel({ type: Array as PropType<UploadProps["value"]>, required: true });

const requestMethod: UploadProps["requestMethod"] = async (file: UploadFile) => {
  return {
    status: "success",
    response: {
        url: URL.createObjectURL(file.raw!)
    }
  };
}
</script>

当使用URL.createObjectURL将file对象转换成blob链接后,组件将一直显示loading状态,我尝试在response对象的files数组中,返回一个status为success并且进度条为100的UploadFile类型对象,结果还是loading一直展示中。

QQ20241119-174207

最后我不得不使用css进行隐藏:

.image-upload {
    :deep(.t-image__loading) {
        display: none;
    }
}

期望结果

我希望能正确展示loading,在blob链接时,它能不显示

实际结果

No response

框架版本

3.5.12

浏览器版本

131.0.6778.70

系统版本

win10

Node版本

v22.11.0

补充说明

No response

github-actions[bot] commented 3 hours ago

👋 @mulingyuer,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。