vue3 文件类型传Form Data数据格式给后端

在 Vue 3 中，如果你想将文件（例如上传的 Excel 文件）以 FormData 格式发送到后端，可以通过以下步骤实现。这种方式通常用于处理文件上传，因为它可以将文件和其他数据一起发送到服务器。

首先，创建一个 Vue 组件，用于选择文件并将其封装到 FormData 中。

示例代码：

<template>
  <div>

         <input type="file" class="file-btn hoverPointer" accept=".xls,.xlsx"         @change="changeExcel($event)" />

 <div class="button2 primary" @click="clickImport">立即导入</div>
  </div>
</template>

<script setup lang="ts">

import { ref } from 'vue'

import { apiGetDownloadImportFile, apiPostImportData, apiPostImportDataLogPage } from '@/api/encouragementApi'

import { useAjax } from '@/hooks/common'

let fileValue = ref<any>(null) // 存储文件

const changeExcel = (e: any) => {

  const files = e.target.files

  if (files.length <= 0) {

    return false

  } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {

    console.log('上传格式不正确，请上传xls或者xlsx格式')

    return false

  }

  fileValue.value = files[0]

}

// 立即导入

const clickImport = () => {

  const formData = new FormData()

  formData.append('file', fileValue.value)

// 调接口

  useAjax({

    apiName: apiPostImportData({

      encourageTypeId: 1,

      file: formData

    }),

    success: (res: any) => {

      console.log(res)

    },

    failure: () => {

      console.log('导入失败')

    }

  })

}

</script>