织梦网站更改主页链接seo网站推广技术
在 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>