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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/975687.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

游戏引擎学习第119天

仓库:https://gitee.com/mrxiao_com/2d_game_3 上一集回顾和今天的议程 如果你们还记得昨天的进展&#xff0c;我们刚刚完成了优化工作&#xff0c;目标是让某个程序能够尽可能快速地运行。我觉得现在可以说它已经快速运行了。虽然可能还没有达到最快的速度&#xff0c;但我们…

deepseek清华大学第二版 如何获取 DeepSeek如何赋能职场应用 PDF文档 电子档(附下载)

deepseek清华大学第二版 DeepSeek如何赋能职场 pdf文件完整版下载 https://pan.baidu.com/s/1aQcNS8UleMldcoH0Jc6C6A?pwd1234 提取码: 1234 或 https://pan.quark.cn/s/3ee62050a2ac

树形DP(树形背包+换根DP)

树形DP 没有上司的舞会 家常便饭了&#xff0c;写了好几遍&#xff0c;没啥好说的&#xff0c;正常独立集问题。 int head[B]; int cnt; struct node {int v,nxt; }e[B<<1]; void modify(int u,int v) {e[cnt].nxthead[u];e[cnt].vv;head[u]cnt; } int a[B]; int f[B]…

基于 Python 的项目管理系统开发

基于 Python 的项目管理系统开发 一、引言 在当今快节奏的工作环境中&#xff0c;有效的项目管理对于项目的成功至关重要。借助信息技术手段开发项目管理系统&#xff0c;能够显著提升项目管理的效率和质量。Python 作为一种功能强大、易于学习且具有丰富库支持的编程语言&…

紫光同创开发板使用教程(二):sbit文件下载

sbit文件相当于zynq里面的bit文件&#xff0c;紫光的fpga工程编译完成后会自动生成sbit文件&#xff0c;因工程编译比较简单&#xff0c;这里不在讲解工程编译&#xff0c;所以我这里直接下载sbit文件。 1.工程编译完成后&#xff0c;可以看到Flow列表里面没有报错&#xff0c…

完美解决:.vmx 配置文件是由 VMware 产品创建,但该产品与此版 VMware Workstation 不兼容

参考文章&#xff1a;该产品与此版 VMware Workstation 不兼容&#xff0c;因此无法使用 问题描述 当尝试使用 VMware Workstation 打开别人的虚拟机时&#xff0c;可能会遇到以下报错&#xff1a; 此问题常见于以下场景&#xff1a; 从其他 VMware 版本&#xff08;如 ESX…

QQ登录测试用例报告

QQ登录测试用例思维导图 一、安全性测试用例 1. 加密传输与存储验证 测试场景&#xff1a;输入账号密码并提交登录请求。预期结果&#xff1a;账号密码通过加密传输&#xff08;如HTTPS&#xff09;与存储&#xff08;如哈希加盐&#xff09;&#xff0c;无明文暴露。 2. 二…

Docker内存芭蕾:优雅调整容器内存的极限艺术

title: “&#x1f4be; Docker内存芭蕾&#xff1a;优雅调整容器内存的极限艺术” author: “Cjs” date: “2025-2-23” emoji: “&#x1fa70;&#x1f4a5;&#x1f4ca;” 当你的容器变成内存吸血鬼时… &#x1f680; 完美内存编排示范 &#x1f4dc; 智能内存管家脚本…

计算机毕业设计SpringBoot+Vue.jst网上购物商城系统(源码+LW文档+PPT+讲解)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

IoT设备硬件攻击技术与接口漏洞利用

IoT设备硬件攻击技术 0x01 总线与接口概述 1.1 UART 概述 UART&#xff08;Universal Asynchronous Receiver/Transmitter&#xff09;是一种常见的串行通信协议&#xff0c;广泛用于嵌入式设备中进行调试和数据传输。它通过两根信号线&#xff08;TX和RX&#xff09;实现异…

Windows程序设计29:对话框之间的数据传递

文章目录 前言一、父子对话框之间的数据传递1.父窗口获取子窗口数据2.子窗口获取父窗口数据 二、类外函数调用窗口的操作1.全局变量方式2.参数传递方式 总结 前言 Windows程序设计29&#xff1a;对话框之间的数据传递。 在Windows程序设计28&#xff1a;MFC模态与非模态对话框…

敏捷开发07:敏捷项目可视化管理-ScrumBoard(Scrum板)使用介绍

ScrumBoard(Scrum板)介绍 ScrumBoard&#xff08;Scrum板&#xff09;是敏捷项目管理中使用的可视化工具&#xff0c;用于跟踪和监控冲刺阶段的任务进度。 主要通过可视化的看板来管理工作&#xff0c;它可视化了敏捷开发中的工作流程、任务状态、团队角色。 Scrum 团队在各…

【每日八股】Redis篇(一):概述

Redis 为什么快&#xff1f; 一句话概括&#xff1a; Redis 之所以快&#xff0c;主要是因为它是基于内存操作的&#xff0c;避免了磁盘 I/O 的开销&#xff1b;采用单线程模型&#xff0c;避免了上下文切换和锁竞争&#xff1b;使用了高效的数据结构和紧凑的编码方式&#xf…

蓝桥杯——按键

一&#xff1a;按键得原理图 二&#xff1a;按键的代码配置 step1 按键原理图对应引脚配置为输入状态 step2 在GPIO中将对应引脚设置为上拉模式 step3 在fun.c中写按键扫描函数 写完后的扫描函数需放在主函数中不断扫描 扫描函数主要通过两个定义变量的值来判断&#xf…

语音控制热水器WTK69000离线语音识别芯片方案:迈向智能家居新时代

一、开发背景 在传统热水器使用中&#xff0c;人们往往需要手动调节水温、选择模式&#xff0c;这不仅操作繁琐&#xff0c;而且容易因误操作导致不必要的能源浪费。为了改善这一现状&#xff0c;热水器厂商开始引入语音识别技术。通过语音识别芯片&#xff0c;热水器能够准确识…

演示基于FPGA的视频图像去雾处理效果

我近期用FPGA开发板做了一个视频图像去雾算法模块&#xff0c;用于验证其能否在不进行帧缓冲的情况下实现去雾功能。 去雾算法来自一篇技术资料&#xff08;私信提供篇名&#xff09;&#xff0c;其基础是近似的大气光模型。 1 算法原理概要 借助RGB直角坐标空间中的光矢量分…

UE_C++ —— Gameplay Tags

目录 一&#xff0c;Defining Gameplay Tags Adding Tags in Project Settings Importing Tags from Data Table Assets Defining Tags with C 二&#xff0c;Using Defined Gameplay Tags Applying Tags to Objects Evaluating Tags with Conditional Functions 三&am…

计算机视觉算法实战——三维重建(主页有源码)

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ ​ 1. 三维重建领域简介 三维重建&#xff08;3D Reconstruction&#xff09;是计算机视觉的核心任务之一&#xff0c;旨在通过多视角图像、视频…

Spring5框架八:整合Mybatis

精心整理了最新的面试资料&#xff0c;有需要的可以自行获取 点击前往百度网盘获取 点击前往夸克网盘获取 1、导入相关的jar包 <dependencies><!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc --><dependency><groupId>…

AI学习第一天-什么是AI

AI的发展可以被分为四次浪潮&#xff0c;这包括符号主义、机器学习与神经网络&#xff0c;以及深度学习。在这些发展中&#xff0c;深度学习凭借其在处理非结构化复杂数据、强大的学习能力和可解释性方面的优势备受关注。深度学习技术的应用不仅提升了AI系统的性能&#xff0c;…