Tencent / tdesign-vue-next

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

[Upload 上传] 批量上传文件报错 TypeError: Cannot read properties of undefined (reading 'raw') #4296

Open FanJPson opened 5 months ago

FanJPson commented 5 months ago

tdesign-vue-next 版本

1.9.4

重现链接

No response

重现步骤

说明

上传文件,控制台输入了错误信息:TypeError: Cannot read properties of undefined (reading 'raw')

代码

<t-upload
  ref="uploadRef"
  v-model="formData.files"
  placeholder="支持批量上传文件,文件格式不限"
  theme="file-flow"
  :abridge-name="[10, 7]"
  :auto-upload="true"
  :multiple="true"
   :allow-upload-duplicate-file="true"
  :before-all-files-upload="beforeUpload"
   :use-mock-progress="false"
   :show-upload-progress="true"
  :request-method="customUpload"
  >
  </t-upload>
<script setup lang="ts">
// ... 省略导入代码

const uploadRef = ref();
const formData = reactive({
  files: [],
});

function beforeUpload(file: UploadFile[]) {
  console.log(file);
  return true;
}
// 下方代码复制自 Upload 上传 页面的 “自定义上传方法” 案例
async function customUpload(files: UploadFile | UploadFile[]) {
  console.log(files, 'upload');
  return new Promise<RequestMethodResponse>((resolve) => {
    // 上传进度控制示例
    let percent = 0;
    const percentTimer = setInterval(() => {
      if (percent + 10 < 99) {
        percent += 10;
        uploadRef.value.uploadFilePercent({ files, percent });
      } else {
        clearInterval(percentTimer);
      }
    }, 100);

    const timer = setTimeout(() => {
      // resolve 参数为关键代码
      resolve({
        status: 'success',
        response: { url: 'https://tdesign.gtimg.com/site/avatar.jpg', files: files as UploadFile[] },
      });

      clearTimeout(timer);
      clearInterval(percentTimer);
    }, 1000);
  });
}
</script>

错误

Snipaste_2024-06-14_18-37-12

Snipaste_2024-06-14_18-38-26

实际测试此错误对上传并无影响,或是我并未测出问题的影响在哪;

期望结果

无报错

实际结果

报错

框架版本

Vue(3.4.21)

浏览器版本

No response

系统版本

Windows 11(23H2)

Node版本

18.18.0

补充说明

No response

github-actions[bot] commented 5 months ago

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