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

news/2025/2/22 17:29:33

在 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>


http://www.niftyadmin.cn/n/5862577.html

相关文章

Python常见面试题的详解13

1. 以下X是什么类型 X (i for i in range(10)) 要点 在 Python 中&#xff0c;变量的类型取决于其赋值的对象。 下面代码中的 (i for i in range(10)) 是一个生成器表达式。生成器表达式是一种简洁的创建生成器的方式&#xff0c;它类似于列表推导式&#xff0c;但使用圆括号…

# 嵌入式基础学习|C语言——进程篇综合(含进阶)

进程与多任务编程 进程的概念 进程是进行中的程序&#xff0c;即程序的一次执行过程。它包含了程序在内存中的代码、数据以及CPU的执行状态。进程是程序的实例&#xff0c;是操作系统进行资源分配和调度的基本单位。 程序&#xff1a;静态的代码文件&#xff0c;存储在硬盘上…

windwos与linux环境下Iperf3带宽测试工具的安装、使用

目录 一、前言 二、windows 2.1下载 2.2安装 2.3使用 2.3.1服务端 2.3.2客户端 2.3.3输出内容 1.客户端 2.服务端 2.4.相关命令 三、linux 3.1安装 3.2使用 1.服务端 2.客户端 3.输出内容 1.客户端 2.服务端 一、前言 在数字化浪潮下&#xff0c;网络性能…

聊聊istio服务网格

聊聊istio服务网格 微服务的缺点&#xff1a;istio介绍微服务改进前后istio与服务治理 istio与k8s的关系istio的整体架构如有需要收藏的看官&#xff0c;顺便也用发财的小手点点赞哈&#xff0c;如有错漏&#xff0c;也欢迎各位在评论区评论&#xff01; 微服务的缺点&#xff…

写大论文的word版本格式整理,实现自动生成目录、参考文献序号、公式序号、图表序号

前情提要&#xff1a;最近开始写大论文&#xff0c;发现由于内容很多导致用老方法一个一个改的话超级麻烦&#xff0c;需要批量自动化处理&#xff0c;尤其是序号&#xff0c;在不断有增添删减的情况时序号手动调整很慢也容易出错&#xff0c;所以搞一个格式总结&#xff0c;记…

前端开发常见问题与面试-02

1、vue的双向绑定原理是什么&#xff1f;里面的关键点在哪里&#xff1f; Vue的双向绑定原理是基于Object.defineProperty或者Proxy来实现的&#xff0c;其关键点在于数据劫持&#xff0c;即对数据的读取和修改进行拦截&#xff0c;在数据发生变化时自动更新视图 2、实现水平…

Infuse Pro for Mac v8.1 全能视频播放器 支持M、Intel芯片

Infuse Pro 是一款强大的 Mac 视频播放器。它可以一口通吃您所有的视频文件 - Infuse 将把您从繁琐的视频转换中解放出来&#xff0c;用极美的方式在您的 Mac 上观赏几乎所有视频的格式。Infuse 已适配 macOS 11 并添加更加强大的在线视频&#xff0c;Trakt 同步&#xff0c;Ai…

神经网络剪枝技术的重大突破:sGLP-IB与sTLP-IB

神经网络剪枝技术的重大突破:sGLP-IB与sTLP-IB 在人工智能飞速发展的今天,深度学习技术已经成为推动计算机视觉、自然语言处理等领域的核心力量。然而,随着模型规模的不断膨胀,如何在有限的计算资源和存储条件下高效部署这些复杂的神经网络模型,成为了研究者们亟待解决的…