Vue3使用ElementPlus中的el-upload手动上传并调用上传接口

news/2024/2/25 19:56:48/文章来源:https://blog.csdn.net/nyasm/article/details/135569817

前端代码

	   <div class="upload-div"><el-uploadv-model:file-list="form.fileImageList"ref="uploadRef"capture="false"action="#"accept="image/*"list-type="picture-card":on-change="handleChange":auto-upload="false":on-preview="handlePictureCardPreview":on-remove="handleRemove":multiple="true"><el-icon><Plus/></el-icon></el-upload><el-dialog v-model="dialogVisible" class="image-dialog"><img style="width: 100%;height: 100%" w-full :src="dialogImageUrl" alt="Preview Image"/></el-dialog></div>
const fileBinaryList = ref([]);
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
const buttonLoading = ref(false);const handleChange = (file, files) => {// file是当前上传的文件,files是当前所有的文件,fileBinaryList.value = files;
};const handlePictureCardPreview = (file) => {dialogImageUrl.value = file.url;dialogVisible.value = true
}const handleRemove = (file) => {delImageByName(file.name).then(response => {proxy.$modal.msgSuccess("删除成功");}).finally(() => {});
}function submitForm() {let formData = new FormData();  //FormData中的参数formData.append('id', form.value.id);fileBinaryList.value.forEach((item) => {formData.append('files', item.raw);});uploadBinaryImage(formData);proxy.$modal.msgSuccess("修改成功");
}

前端定义接口

export function uploadBinaryImage(data) {return request({url: '/update/update/uploadBinaryImage',method: 'post',data: data,headers: {'Content-Type': 'multipart/form-data'}})
}

后端代码

实体类

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.web.multipart.MultipartFile;/*** @author: rattcs* @date: 2023/1/13*/
@Data
@AllArgsConstructor
@NoArgsConstructor
public class UploadDto {private String id;}

定义接口

	/*** 上传二进制文件图片集合*/@SaCheckPermission("update:update:uploadBinaryImage")@Log(title = "上传二进制文件图片", businessType = BusinessType.INSERT)@PostMapping("/uploadBinaryImage")public void uploadBinaryImage(@RequestBody @RequestParam("files") MultipartFile[] files, UploadDto bo) {iInvestigationRiverLakeDischargeOutletsService.uploadBinaryImage(files,bo);}

上传文件并插入数据库数据

	@Value("${upload.dir}")private String UPLOAD_DIR;@Overridepublic void uploadBinaryImage(MultipartFile[] files,UploadDto uploadDto) {String id = uploadDto.getId();for (MultipartFile file : files) {try {// 检查上传目录是否存在,不存在则创建File uploadDir = new File(UPLOAD_DIR);if (!uploadDir.exists()) {uploadDir.mkdirs();}// 获取文件名String fileName = file.getOriginalFilename();String suffix = file.getOriginalFilename().split("\\.")[1];// 设置上传文件的保存路径String fileUploadName = java.util.UUID.randomUUID() + "." + suffix;Path filePath = uploadDir.toPath().resolve(fileUploadName);// 将文件复制到指定路径Files.copy(file.getInputStream(), filePath, StandardCopyOption.REPLACE_EXISTING);investigationImageMapper.insert(new InvestigationImage() {{setInvestigationId(Long.valueOf(id));setImageUrl(fileUploadName);setImageName(fileUploadName);setCreateTime(new Date());}});} catch (IOException e) {e.printStackTrace();}}}

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

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

相关文章

vue知识-04

计算属性computed 注意&#xff1a; 1、计算属性是基于它们的依赖进行缓存的 2、计算属性只有在它的相关依赖发生改变时才会重新求值 3、计算属性就像Python中的property&#xff0c;可以把方法/函数伪装成属性 4、computed: { ... } 5、计算属性必须要有…

MySQl Mybatis

一、MySQL 1.1 概述 1.1.1 MySQL安装 1.1.2 数据模型 1.1.3 SQL简介 1.2 DDL 1.2.1 数据库操作 1.2.2 图形化工具 1.2.3 表结构操作 &#xff08;一&#xff09;创建 &#xff08;二&#xff09;数据类型 &#xff08;1&#xff09;数值类型 age tinyint unsigned——加上…

Kubernetes 集群管理—日志架构

日志架构 应用日志可以让你了解应用内部的运行状况。日志对调试问题和监控集群活动非常有用。 大部分现代化应用都有某种日志记录机制。同样地&#xff0c;容器引擎也被设计成支持日志记录。 针对容器化应用&#xff0c;最简单且最广泛采用的日志记录方式就是写入标准输出和标…

书生·浦语大模型--第三节课笔记--基于 InternLM 和 LangChain 搭建你的知识库

文章目录 大模型开发范式RAGLangChain框架&#xff1a;构建向量数据库构建检索问答链优化建议web 部署 实践部分环境配置 大模型开发范式 LLM的局限性&#xff1a;时效性&#xff08;最新知识&#xff09;、专业能力有限&#xff08;垂直领域&#xff09;、定制化成本高&#…

测试平台出问题?看我20分钟快速定位!

今天遇到一个问题&#xff0c;感觉挺有意思&#xff0c;处理过程也非常有意义&#xff0c;希望能给大家一个借鉴吧。今天一位小姐姐找到了我们大组长&#xff0c;说测试平台添加自动化测试用例失败&#xff0c;之后我们组长把我拉到了一个群里让我去看一下&#xff0c;硬着头皮…

C++面试宝典第19题:最长公共前缀

题目 编写一个函数来查找字符串数组中的最长公共前缀,如果不存在公共前缀,返回空字符串""。说明:所有输入只包含小写字母a-z。 示例1: 输入: ["flower", "flow", "flight"]输出: "fl" 示例2: 输入: ["dog",…

如何在Windows 10/11的防火墙中禁止和允许某个应用程序,这里提供详细步骤

想阻止应用程序访问互联网吗&#xff1f;以下是如何通过简单的步骤阻止和允许Windows防火墙中的程序。​ 一般来说&#xff0c;大多数用户永远不需要担心应用程序访问互联网。然而&#xff0c;在某些情况下&#xff0c;你需要限制应用程序访问互联网。 例如&#xff0c;有问题…

vue知识-03

购物车案例 要实现的功能&#xff1a; 1、计算商品总价格 2、全选框和取消全选框 3、商品数量的增加和减少 <body> <div id"app"><div class"row"><div class"col-md-6 col-md-offset-3"><h1 class"text-center…

TinyLog iOS v3.0接入文档

1.背景 为在线教育部提供高效、安全、易用的日志组件。 2.功能介绍 2.1 日志格式化 目前输出的日志格式如下&#xff1a; 日志级别/[YYYY-MM-DD HH:MM:SS MS] TinyLog-Tag: |线程| 代码文件名:行数|函数名|日志输出内容触发flush到文件的时机&#xff1a; 每15分钟定时触发…

【Spring 篇】走进SpringMVC的世界:舞动Web的激情

嗨&#xff0c;亲爱的小白们&#xff01;欢迎来到这篇关于SpringMVC的博客&#xff0c;让我们一起探索这个舞动Web的框架&#xff0c;感受它带来的激情和便利。在这个世界里&#xff0c;我们将学到SpringMVC的概述、开发步骤以及如何快速入门&#xff0c;一切都是如此的令人兴奋…

C# Winform翻牌子记忆小游戏

效果 源码 新建一个winform项目命名为Matching Game&#xff0c;选用.net core 6框架 并把Form1.cs代码修改为 using Timer System.Windows.Forms.Timer;namespace Matching_Game {public partial class Form1 : Form{private const int row 4;private const int col 4;p…

为什么光刻要用黄光

光刻是集成电路&#xff08;IC或芯片&#xff09;制造中的重要工艺之一。简单来说&#xff0c;它是通过使用光掩膜和光刻胶在基板上复制电路图案的过程。 基板将涂覆硅二氧化层绝缘层和光刻胶。光刻胶在被紫外光照射后可以容易地用显影剂溶解&#xff0c;然后在腐蚀后&#xf…

MongoDB Compass当前版本及历史版本下载安装

mongoDB compass 当前版本下载 官网 https://www.mongodb.com/try/download/compass 官网下载一般只能下载最新版本。 github https://github.com/mongodb-js/compass MongoDB Compass与MongoDB的版本对应关系 MongoDB CompassMongoDB1.9.12MongoDB 2.6.11 Community

Redis:原理速成+项目实战——Redis企业级项目实战终结篇(HyperLogLog实现UV统计)

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;Redis&#xff1a;原理速成项目实战——Redis实战14&#xff08;BitMap实现用户签到功能&#xff09; &#x1f4da;订阅专栏&am…

uniapp-uniCloud的基本使用(编写云存储的地区级联选择器)

目录 新建项目&#xff0c;创建 uniCloud 服务空间并关联 1. 新建项目 2. 创建 uniCloud 服务空间并关联 manifest.json内未配置Appld,请重新获取后再 云数据库的使用 城市选择和云数据库 介绍 云端数据 DB Schema概述 新建项目&#xff0c;创建 uniCloud 服务空间并关…

统计学-R语言-4.3

文章目录 前言直方图茎叶图箱线图练习 前言 本篇介绍的是数值型数据怎么进行数据可视化&#xff0c;本篇介绍的有直方图、茎叶图、箱线图。 直方图 直方图&#xff08;Histogram&#xff09;用于描述连续型变量的频数分布&#xff0c;实际应用中常用于考察变量的分布是否对称…

Java零基础——Vue基础篇

1.【熟悉】Vue简介 1.1 简介 它是一个构建用户界面单页面的框架 Vue是一个前端框架 https://www.pmdaniu.com/#file UI网站 UI 一般开发者使用蓝湖 工具 看着UI图 写接口 https://lanhuapp.com/web/#/item 是一个轻量级的MVVM&#xff08;Model-View-ViewModel&#xff…

maven管理使用

maven基本使用 一、简介二、配置文件三、项目结构maven基本标签实践(例子) 四、pom插件配置五、热部署六、maven 外部手动加载jar打包方式Maven上传私服或者本地 一、简介 基于Ant 的构建工具,Ant 有的功能Maven 都有,额外添加了其他功能.本地仓库:计算机中一个文件夹,自己定义…

Linux实操学习

Linux常用操作 一、帮助命令1. man1.1 基本语法1.2 快捷键1.3 注意事项 2. help2.1 基本语法2.2 注意事项 3. 常用快捷键 二、文件目录类1. 常规操作1.1 pwd1.2 cd1.3 ls 2. 文件夹操作2.1 mkdir2.2 rmdir 3. 文件操作3.1 touch3.2 cp3.3 rm3.4 mv 4. 文件查看4.1 cat4.2 more4…

国内外好用的 LLM 列表

视频来源&#xff1a;https://www.bilibili.com/video/BV1c64y157Qm/?vd_source1e841703c91b5b77fd20e5707bae49d2 下图是测试括号闭合能力的得分