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>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用 INFINI Console 配置集群监控 Webhook 通知指南

在集群管理中&#xff0c;监控关键指标如CPU、内存、磁盘、JVM等是至关重要的。对于Easysearch及ES生态系统&#xff0c;还需要关注集群本身的指标&#xff0c;例如搜索延迟、集群状态、节点移除等。INFINI Console不仅提供了默认的监控指标&#xff0c;还支持用户自定义监控项…

WPF的页面设计和实用功能实现

目录 一、TextBlock和TextBox 1. 在TextBlock中实时显示当前时间 二、ListView 1.ListView显示数据 三、ComboBox 1. ComboBox和CheckBox组合实现下拉框多选 四、Button 1. 设计Button按钮的边框为圆角&#xff0c;并对指针悬停时的颜色进行设置 一、TextBlock和TextBox…

二级公共基础之数据结构与算法篇(八)排序技术

目录 前言 一、交换类排序 1.冒泡排序法 1. 冒泡排序的思想 2. 冒泡排序的实现步骤 3. 示例 4. 冒泡排序的特点 2.快速排序 1. 快速排序的核心思想 2. 快速排序的实现步骤 3. 示例代码(C语言) 4. 快速排序的特点 二、插入类排序 1. 简单插入排序 1.简单插入排…

记录一次 ALG 的处理过程

前几天朋友找我帮忙&#xff0c;说碰到很大困难了&#xff0c;实际上&#xff0c;不过如此 现象是这样的&#xff1a; FreeSWITCH mod_unimrcp 工作不正常 FS 和 mrcp-server 两边同时抓包&#xff0c;看到的是&#xff1a; sip 流程正常 FS TCP 连接到 mccp-server 失败&…

【Linux网络编程】IP协议格式,解包步骤

目录 解析步骤 1.版本字段&#xff08;大小&#xff1a;4比特位&#xff09; 2.首部长度&#xff08;大小&#xff1a;4比特位&#xff09;&#xff08;单位&#xff1a;4字节&#xff09; &#x1f35c;细节解释&#xff1a; 3.服务类型&#xff08;大小&#xff1a;8比特…

CSDN文章质量分查询系统【赠python爬虫、提分攻略】

CSDN文章质量分查询系统 https://www.csdn.net/qc 点击链接-----> CSDN文章质量分查询系统 <------点击链接 点击链接-----> https://www.csdn.net/qc <------点击链接 点击链接-----> CSDN文章质量分查询系统 <------点击链接 点击链…

HTML应用指南:利用GET请求获取全国泸溪河门店位置信息

随着新零售业态的快速发展,门店位置信息的获取变得越来越重要。作为新兴烘焙品牌之一,泸溪河自2013年在南京创立以来,一直坚持“健康美味,香飘世界”的企业使命,以匠人精神打造新中式糕点。为了更好地理解和利用这些数据,本篇文章将深入探讨GET请求的实际应用,并展示如何…

如何在 React 中测试高阶组件?

在 React 中测试高阶组件可以采用多种策略&#xff0c;以下是常见的测试方法&#xff1a; 1. 测试高阶组件返回的组件 高阶组件本身是一个函数&#xff0c;它返回一个新的组件。因此&#xff0c;可以通过测试这个返回的组件来间接测试高阶组件的功能。通常使用 Jest 作为测试…

R语言Stan贝叶斯空间条件自回归CAR模型分析死亡率多维度数据可视化

全文链接&#xff1a;https://tecdat.cn/?p40424 在空间数据分析领域&#xff0c;准确的模型和有效的工具对于研究人员至关重要。本文为区域数据的贝叶斯模型分析提供了一套完整的工作流程&#xff0c;基于Stan这一先进的贝叶斯建模平台构建&#xff0c;帮助客户为空间分析带来…

Casbin 权限管理介绍及在 Go 语言中的使用入门

引言 在现代软件开发过程中&#xff0c;权限管理是一个至关重要的环节&#xff0c;它关系到系统的安全性和用户体验。Casbin 是一个强大的访问控制库&#xff0c;支持多种访问控制模型&#xff0c;如 ACL&#xff08;访问控制列表&#xff09;、RBAC&#xff08;基于角色的访问…

快速入门——第三方组件element-ui

学习自哔哩哔哩上的“刘老师教编程”&#xff0c;具体学习的网站为&#xff1a;10.第三方组件element-ui_哔哩哔哩_bilibili&#xff0c;以下是看课后做的笔记&#xff0c;仅供参考。 第一节 组件间的传值 组件可以有内部Data提供数据&#xff0c;也可由父组件通过prop方式传…

【算法通关村 Day7】递归与二叉树遍历

递归与二叉树遍历青铜挑战 理解递归 递归算法是指一个方法在其执行过程中调用自身。它通常用于将一个问题分解为更小的子问题&#xff0c;通过重复调用相同的方法来解决这些子问题&#xff0c;直到达到基准情况&#xff08;终止条件&#xff09;。 递归算法通常包括两个主要…

朴素贝叶斯法

文章目录 贝叶斯定理朴素贝叶斯法的学习与分类条件独立假设朴素贝叶斯的后验概率最大化准则朴素贝叶斯的基本公式 朴素贝叶斯法的参数估计极大似然估计 贝叶斯定理 前置知识&#xff1a;条件概率、全概率、贝叶斯公式 推荐视频&#xff0c;看完视频后搜索博客了解先验概率、后…

《A++ 敏捷开发》- 20 从 AI 到最佳设计

“我们现在推行AIGC&#xff0c;服务端不需要UI交互设计的用AI自动产出代码&#xff0c;你建议的结对编程、TDD等是否还适用&#xff1f;” 这两年AI确实很火&#xff0c;是报纸、杂志的热门话题。例如&#xff0c;HBR杂志从2024年9月至2025年二月份3期&#xff0c;里面有接近一…

GO系列-IO 文件操作

os io 判断文件是否存在 func fileExist(filePath string) (bool, error) {_, err : os.Stat(filePath)if err nil {return true, nil}if os.IsNotExist(err) {return false, nil}return false, &CheckFileExistError{filePath} } 读取文件内容 func readFileContext(…

rs485协议、电路详解(保姆级)

起源 RS-485即Recommended Standard 485 协议的简写。1983年被电子工业协会(EIA)批准为一种通讯接口标准. 数据在通信双方之间传输&#xff0c;本质是传输物理的电平&#xff0c;比方说传输5V的电压 -1V的电压信号&#xff0c;这些物理信号在传输过程中会受到很多干扰&#x…

JavaWeb-Tomcat服务器

文章目录 Web服务器存在的意义关于Web服务器软件Tomcat服务器简介安装Tomcat服务器Tomcat服务器源文件解析配置Tomcat的环境变量启动Tomcat服务器一个最简单的webapp(不涉及Java) Web服务器存在的意义 我们之前介绍过Web服务器进行通信的原理, 但是我们当时忘记了一点, 服务器…

【愚公系列】《Python网络爬虫从入门到精通》008-正则表达式基础

标题详情作者简介愚公搬代码头衔华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。近期荣誉2022年度…

视觉分析之边缘检测算法

9.1 Roberts算子 Roberts算子又称为交叉微分算法&#xff0c;是基于交叉差分的梯度算法&#xff0c;通过局部差分计算检测边缘线条。 常用来处理具有陡峭的低噪声图像&#xff0c;当图像边缘接近于正45度或负45度时&#xff0c;该算法处理效果更理想。 其缺点是对边缘的定位…

DuodooBMS源码解读之 sale_change模块

销售变更模块用户使用手册 一、模块概述 本扩展模块主要包含两个主要的 Python 文件&#xff1a;sale_change/report/sale_change_report.py 和 sale_change/wizard/sale_change_download.py&#xff0c;提供了销售变更报表查看和销售变更单下载的功能。以下是详细的使用说明…