当前位置: 首页 > news >正文

go-gin-vue3-elementPlus带参手动上传文件

文章目录

    • 一. 总体代码流程
      • 1.1 全局Axios部分样例
      • 1.2 上传业务
    • 二. 后端部分
    • 三. 测试样例


go的mvc层使用gin框架. 总的来说gin的formFile封装的不如springboot的好.获取值有很多的坑. 当然使用axios的formData也有不少坑.现给出较好的解决办法

以下部分仅贴出关键代码

一. 总体代码流程

1.1 全局Axios部分样例

axios前后端网络交互

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({// axios中请求配置有baseURL选项,表示请求URL公共部分baseURL: 'http://127.0.0.1:20139',// 超时timeout: 5000
})export default service;// 不使用service实例.重新创建axios封装上传
export function uploadFiles(url,data={}){return axios({method: "POST",url: 'http://127.0.0.1:20139'+url,transformRequest: [function(data, headers) {// 去除post请求默认的Content-Typedelete headers['Content-Type']return data}],data: data,})
}

1.2 上传业务

关键代码一览.需要留意的是,我使用手动上传,element中before-upload,before-remove失效. 为避免更多问题使用了on-change监听.其中uploadFile参数是element封装的普通对象. file对象被封装在其中的raw属性. 这一点要尤为注意 gin框架不同于springboot. formfile只能读取file类型
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

    <el-form :inline="true":model="resumeForm"class="demo-form-inline"label-position="right"label-width="100px"><el-row :gutter="20"><el-col :span="6"><el-form-item label="姓名"><el-input v-model="resumeForm.name" placeholder="请输入姓名" clearable/></el-form-item></el-col><el-col :span="6"><el-form-item label="电话"><el-input v-model="resumeForm.phone" placeholder="请输入电话" clearable/></el-form-item></el-col><el-col :span="6"><el-form-item label="邮箱"><el-input v-model="resumeForm.email" placeholder="请输入邮箱" clearable/></el-form-item></el-col></el-row><el-row :gutter="20"><el-col :span="6"><el-form-item label="工作经验"><el-input v-model="resumeForm.experience" placeholder="请输入工作经验" clearable/></el-form-item></el-col><el-col :span="6"><el-form-item label="学历"><el-selectv-model="resumeForm.education"placeholder="请选择学历水平"clearable><el-option label="专科" value="0"/><el-option label="本科" value="1"/><el-option label="研究生" value="2"/><el-option label="博士" value="3"/></el-select></el-form-item></el-col></el-row><el-row><el-col :span="24"><el-form-item label="上传简历"><el-uploadref="recruitRef"class="upload-demo"dragaction="#":auto-upload="false":on-change="handleChange"limit="1"><el-icon class="el-icon--upload"><upload-filled/></el-icon><div class="el-upload__text">拖拽 或 <em>点击上传</em></div><template #tip><div class="el-upload__tip">.pdf 文件大小 ≤ 500kb</div></template></el-upload></el-form-item></el-col></el-row><el-form-item><el-button type="primary" @click="postResumeForm()">投递</el-button></el-form-item></el-form>
const router = useRouter()
const resumeForm = reactive({name: '',phone: '',email: '',experience: '',education: '',position: router.currentRoute.value.params.position
})const recruitRef = ref()
let formData = new FormData()
// 文件改变触发
function handleChange(uploadFile, uploadFiles) {// 文件校验if (!verifyBeforeUpload(uploadFile)) {removeFile()return}console.log(uploadFile)formData.append("file", uploadFile.raw)
}function removeFile() {if (recruitRef.value) {formData = new FormData()recruitRef.value.clearFiles()}
}
// 提交表单
function postResumeForm() {ElMessageBox.confirm('确认提交?提交后仅能修改一次', '提示', {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(async () => {if (formData === null || formData === undefined) {ElMessage.info("必须递交简历信息!")return}for (let key in resumeForm) {formData.append(key,resumeForm[key])}let res = await reqPostResumeForm(formData)if (res.code !== 200) {ElMessage.error("简历投递失败")return}await ElMessageBox.alert("简历投递成功! 3-7个工作日内,您将收到回复", '提示', {confirmButtonText: "确认"})removeFile()}).catch((err) => {removeFile()console.log(err)ElMessage.info("简历投递已取消!")})
}

文件校验部分

// 单文件大小校验
function verifyFileSize(file) {if (file) {let fileSize = file.size;let fileMaxSize = 1024 * 500;//500kbif (fileSize > fileMaxSize) {ElMessage.error("文件不能大于500kb!");file.value = "";return false;} else if (fileSize <= 0) {ElMessage.error("文件不能为0kb!");file.value = "";return false;}return true}ElMessage.error("必须传递文件!")return false;}// 校验文件格式和大小
export function verifyBeforeUpload(file) {// 格式const extension = file.name.split('.').pop().toLowerCase();console.log(extension)if (!ACCEPTED_EXTENSIONS.includes(extension)) {ElMessage.error('仅支持 pdf 格式的文件');return false;}// 大小return verifyFileSize(file);
}

请求发送部分

export function reqPostResumeForm(formData){return uploadFiles(jobs.postResumeUrl,formData)
}

二. 后端部分

func PostResume(c *gin.Context) {file, err := c.FormFile("file")if err != nil {panic(fmt.Sprintf("file参数不能为空"))}var resume model.Resumeerr = c.ShouldBind(&resume)if err != nil {panic(fmt.Sprintf("resume获取错误,原因是: %v", err))}log.Printf("%v", file)
}

三. 测试样例

在这里插入图片描述
在这里插入图片描述

相关文章:

go-gin-vue3-elementPlus带参手动上传文件

文章目录 一. 总体代码流程1.1 全局Axios部分样例1.2 上传业务 二. 后端部分三. 测试样例 go的mvc层使用gin框架. 总的来说gin的formFile封装的不如springboot的好.获取值有很多的坑. 当然使用axios的formData也有不少坑.现给出较好的解决办法 以下部分仅贴出关键代码 一. 总…...

艺术的维度:洞察AI诈骗,优雅防范之艺术

当前&#xff0c;AI技术的广泛应用为社会公众提供了个性化智能化的信息服务&#xff0c;也给网络诈骗带来可乘之机&#xff0c;如不法分子通过面部替换语音合成等方式制作虚假图像、音频、视频仿冒他人身份实施诈骗、侵害消费者合法权益。 以下是一些常见的AI诈骗例子&#xf…...

JavaScript的作用域和作用域链

作用域 ● 作用域&#xff08;Scoping&#xff09;&#xff1a;我们程序中变量的组织和访问方式。"变量存在在哪里&#xff1f;“或者"我们可以在哪里访问某个变量&#xff0c;以及在哪里不能访问&#xff1f;” ● 词法作用域&#xff08;Lexical scoping&#xff…...

电脑文件批量重命名攻略:高效操作技巧助您轻松完成任务

在日常使用电脑时&#xff0c;我们经常需要对文件进行重命名。当文件数量众多时&#xff0c;手动重命名既耗时又容易出错。此时&#xff0c;借助一些实用技巧&#xff0c;我们可以轻松地完成电脑文件的批量重命名。本文将提供一份全面的电脑文件批量重命名攻略&#xff0c;帮助…...

四、三种基本程序结构

1、程序结构 (1)在C语言程序中&#xff0c;一共有三种程序结构&#xff1a;顺序结构、选择结构(分支结构)、循环结构。 顺序结构&#xff1a;按照事务本身特性&#xff0c;必须一个接着一个来完成。选择结构&#xff1a;到某个节点后&#xff0c;会根据一次判断结果来决定之后…...

深入理解元素的高度、行高、行盒和vertical-align

1.块级元素的高度 当没有设置高度时&#xff0c;高度由内容撑开&#xff0c;实际上是由行高撑开&#xff0c;当有多行时&#xff0c;高度为每行的行高高度之和。 行高为什么存在&#xff1f; 因为每行都由一个行盒包裹&#xff0c;行高实际上是行盒的高度。 2.什么是行盒&am…...

什么叫储能能量管理单元EMU?储能能量管理单元EMU功能?储能EMU是什么?储能能量管理系统如何实现一次调频AGC-AVC功能?

一&#xff1a;储能EMU是什么意思?什么叫储能能量管理单元EMU&#xff1f; EMU是能量管理单元的英文缩写 (Energy Management Unit, EMU) EmuPower3300能量管理单元EMU是由广州智昊电气研发配套EsccPower3300储能协调管理器组成对光伏电站的管理&#xff0c;控制&#xff0c;…...

机器学习之决策树

决策树&#xff1a; 是一种有监督学习方法&#xff0c;从一系列有特征和标签的数据中总结出决策规则&#xff0c;并采用树状图的结构来呈现规则&#xff0c;用来解决分类和回归问题。 节点&#xff1a;根节点&#xff1a;没有进边&#xff0c;有出边。包含最初的&#xff0c;针…...

聊聊logback的UNDEFINED_PROPERTY

序 本文主要研究一下logback的UNDEFINED_PROPERTY substVars ch/qos/logback/core/util/OptionHelper.java public static String substVars(String input, PropertyContainer pc0, PropertyContainer pc1) {try {return NodeToStringTransformer.substituteVariable(input,…...

记一次pdjs时安装glob出现,npm ERR! code ETARGET和npm ERR! code ELIFECYCLE

如往常一样&#xff0c;我使用pdjs来编译proto文件&#xff0c;但出现了以下报错&#xff1a; 大致就是pdjs的util在尝试执行npm install glob^7.2.1 escodegen^1.13.0时出错了 尝试手动执行安装&#xff0c;escodegen被正确安装&#xff0c;但glob^7.2.1出错 npm ERR! code E…...

Zabbix如何监控腾讯云NAT网关

1、NAT网关介绍 NAT 网关&#xff08;NAT Gateway&#xff09;是一种支持 IP 地址转换服务&#xff0c;提供网络地址转换能力&#xff0c;主要包括SNAT&#xff08;Source Network Address Translation&#xff0c;源网络地址转换&#xff09;和DNAT&#xff08;Destination N…...

SpringBoot案例(数据层、业务层、表现层)

1.创建项目 2.选择坐标 3.添加坐标 说明&#xff1a;为了便于开发&#xff0c;引入了lombak坐标。 <!--添加mybatis-plus坐标--><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><ver…...

交叉编译程序:以 freetype 为例

1 程序运行的一些基础知识 1.1 编译程序时去哪找头文件&#xff1f; 系统目录&#xff1a;就是交叉编译工具链里的某个 include 目录&#xff1b;也可以自己指定&#xff1a;编译时用 “ -I dir ” 选项指定。 1.2 链接时去哪找库文件&#xff1f; 系统目录&#…...

spring-cloud-starter-dubbo不设置心跳间隔导致生产者重启no Provider问题记录

版本 spring-cloud-starter-dubbo-2.2.4.RELEASE 问题描述 生产者重启后&#xff0c;正常注册到注册中心&#xff0c;但是消费者调用接口是no provider&#xff0c;偶现&#xff0c;频繁出现 解决办法 先说原因和解决办法&#xff0c;有兴趣可以看下问题的排查过程。 原因…...

【数据结构】败者树的建树与比较过程

文章目录 前置知识归并段 建树过程比较过程疑问为什么比较次数减少了&#xff1f;如果某个归并段的元素一直获胜&#xff0c;没有元素了怎么办&#xff1f;处理方法 1处理方法 2 前置知识 归并段 外部排序算法通常用于处理大规模数据&#xff0c;其中数据量远超过计算机内存的…...

GlobalMapper---dem生成均匀分布的网格,或者均匀分布的点高程点

1打开DEM数据。点击工具栏上的Open Data File(s)按钮&#xff0c;打开DEM数据 2点击【Create Grid】按钮 3生成点 4导出格式xyz 5南方cass展点 6过滤抽稀...

k8s系列文章一:安装指南

前言 k8s是docker的升级版&#xff0c;可用于docker集群配置管理微服务 一、更新ubuntu系统版本 sudo apt update sudo apt upgrade二、添加GPG密钥(阿里源) 尽管我不知道gpg是个什么东西&#xff0c;反正跟着做就完了 curl https://mirrors.aliyun.com/kubernetes/apt/do…...

Pod 进阶

目录 1、资源限制 1.1 官网示例 1.2 CPU 资源单位 1.3 内存 资源单位 2、健康检查&#xff1a;又称为探针&#xff08;Probe&#xff09; 2.1 探针的三种规则 2.2 Probe支持三种检查方法 2.3 官网示例 3、扩展 pod的状态 3.1 Container生命周期 1、资源限制 当定义…...

Proteus仿真--12864LCD显示计算器键盘按键实验(仿真文件+程序)

本文主要介绍基于51单片机的12864LCD液晶显示电话拨号键盘按键实验&#xff08;完整仿真源文件及代码见文末链接&#xff09; 仿真图如下 本设计主要介绍计算器键盘仿真&#xff0c;按键按下后在12864液晶上显示对应按键键值 仿真运行视频 Proteus仿真--12864LCD显示计算器…...

pam_radius库的使用

一. 前言 我们知道&#xff0c;linux pam库是一系列的库&#xff0c;用于处理一些应用程序的认证工作&#xff0c;比如login程序。但是默认的pam库只是用于本地认证&#xff0c;也就是认证的用户名和密码存储在本机上。如果需要远程认证&#xff0c;比如向radius服务器认证&…...

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

Mac软件卸载指南,简单易懂!

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

Linux中《基础IO》详细介绍

目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改&#xff0c;实现简单cat命令 输出信息到显示器&#xff0c;你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...

k8s从入门到放弃之HPA控制器

k8s从入门到放弃之HPA控制器 Kubernetes中的Horizontal Pod Autoscaler (HPA)控制器是一种用于自动扩展部署、副本集或复制控制器中Pod数量的机制。它可以根据观察到的CPU利用率&#xff08;或其他自定义指标&#xff09;来调整这些对象的规模&#xff0c;从而帮助应用程序在负…...

第八部分:阶段项目 6:构建 React 前端应用

现在&#xff0c;是时候将你学到的 React 基础知识付诸实践&#xff0c;构建一个简单的前端应用来模拟与后端 API 的交互了。在这个阶段&#xff0c;你可以先使用模拟数据&#xff0c;或者如果你的后端 API&#xff08;阶段项目 5&#xff09;已经搭建好&#xff0c;可以直接连…...