Vue3+ant3.0上传文件blob变成[object, object]

最新推荐文章于 2025-04-01 21:10:31 发布

Oxygen_liu

最新推荐文章于 2025-04-01 21:10:31 发布

阅读量1.9k

点赞数 1

分类专栏： Vue3 TS 文章标签： typescript 前端 vue

本文链接：https://blog.youkuaiyun.com/qq_41400354/article/details/124199303

版权

TS 同时被 2 个专栏收录

25 篇文章

订阅专栏

21 篇文章

订阅专栏

本文探讨了在Vue3中使用Ant Design Upload组件时，由于数据劫持导致file变量类型转换的问题。通过实例代码，作者揭示了如何避免HTML中的响应式绑定，并提供了将v-model改为:before-upload的方法来修复这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="clearfix">
    <a-upload :before-upload="beforeUpload" v-model:file-list="fileList">
      <a-button :disabled="!!fileList.length" >
        <upload-outlined></upload-outlined>
        上传文件
      </a-button>
    </a-upload>
  </div>
</template>
<script lang="ts" setup>
import { UploadOutlined } from '@ant-design/icons-vue';
import { UploadFileTool } from "@/api";
import type { UploadProps } from 'ant-design-vue';
import { ref } from 'vue';
const fileList = ref<UploadProps['fileList']>([]); //文件列表
const beforeUpload = (file: any) => {
    fileList.value = [...fileList.value, file];
    return false;
};
 const handleUpload = () => {
      const formData = new FormData();
      fileList.value.forEach((file: UploadProps['fileList'][number]) => {
        formData.append('files[]', file as any);
      });
      console.log(formData.get('files[]'))
    };
defineExpose({
    handleUpload
})
</script>