vant4 使用 FormData 传文件到后端变成{}

前端使用的 vant4 框架进行文件上传

首先使用框架中的组件 uploder

<van-field name="uploader" label="文件上传">
    <template #input>
        <van-uploader v-model="chartData" accept="file" max-count="1" :after-read="afterRead">
            <van-button icon="plus" type="primary">上传文件</van-button>
        </van-uploader>
    </template>
</van-field>

上传文件之后会调用回调函数将数据表上传 :after-read

上传的文件需要进行二级制的序列化，使用 FormData（）

 const form = new FormData();
 const afterRead = (file)=>{
     form.append("file",file.file)
     console.log(form.get("file"))
 }

这样就可以将 excel 格式的文件序列化，此时，使用 axios 将文件传到后端时，会出现 数据文件被序列化后转为空

transformRequest 是一个请求转化器，主要功能是在请求前对数据进行转换。如果想深入了解的话 可以参考 Axios源码深度剖析 - AJAX新王者_慕课手记

此时需要在 axios 传输的时候进行配置

 const res = await myAxios.post('/chart/getChart', {
             chartName: chartName.value,
             chartType: chartType.value,
             goal: goal.value,
             file: form.get("file")
         }
         , {
             headers: {
                 'Content-Type': 'multipart/form-data',
                 transformRequest: [data => data]       //请求转化器
             }
         }
     )

参考文档：Vue 3.0 + axios + formdata图片上传formdata 为空_vue3 formdata-CSDN博客