el-upload上传图片给SpringBoot后端

  • 需求
    我的需求是,将上传文件的el-upload放到一个el-form里面,点击保存才提交,所以不能直接用action的方式,下面采用自定义上传的方式来完成
  • Vue前端
    主要是使用editForm.imgList来保存图片的信息,注意这里是一个对象,其格式如下

我这里后端传回来的是一个字符串数组,把他转为对象如下

 this.editForm.imgList = row.imgList.map((url,index) => ({name:index,url: url,}));

前端主要代码

<el-form><el-form-item label="描述" prop="description"><el-input type="textarea" :rows="6" v-model="editForm.description" auto-complete="off"placeholder="请输入描述"></el-input></el-form-item><el-form-item label="图片" prop="description"><el-uploadaction=""list-type="picture-card"multiple:on-change="handlChange":file-list="editForm.imgList":on-error="handleErr"ref="upload":auto-upload="false"><i slot="default" class="el-icon-plus"></i><div slot="file" slot-scope="{file}"><imgclass="el-upload-list__item-thumbnail":src="file.url" alt=""><span class="el-upload-list__item-actions"><spanclass="el-upload-list__item-preview"@click="handlePictureCardPreview(file)"><i class="el-icon-zoom-in"></i></span><spanclass="el-upload-list__item-delete"@click="handleRemove(file)"><i class="el-icon-delete"></i></span></span></div></el-upload></el-form-item></el-form>
  • js主要代码
 data() {return {editForm: {imgList: [],},}
methods: {handleRemove(file) {let arr = this.$refs.upload.uploadFiles// 2.从pics数组中,找到图片对应的索引值let index = arr.indexOf(file)// 3.调用splice方法,移除图片信息arr.splice(index, 1)},handlePictureCardPreview(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;},handlChange(file, fileList) {this.editForm.imgList = fileList;console.log("change",this.editForm.imgList)},submitForm() {let formData = new FormData(); //  用FormData存放上传文件//将图片转为FormData格式
//formData.append() 方法向 FormData 对象添加同一个键(key)的多个值时,
//实际上是在创建一个值的列表,而这个键会与每个添加的值关联起来,
//后端接收到的就是一个Listthis.editForm.imgList.forEach(file => {console.log(file.raw)console.log(file.size)formData.append('files', file.raw)})console.log(formData)//自定义上传axios({method: "post",url: "http://localhost:8089/upload",headers: {'Content-Type': 'multipart/form-data',token: localStorage.getItem('logintoken')},data:formData// traditional: true,}).then(function (res){// console.log(res)return res;});//相当于function(res){ret   
}
  • SpringBoot后端代码

@RestController
@CrossOrigin
public class ManageController {@Value("${saveimg.location.attractions}")String attractionLocation;@RequestMapping(value = "upload")public void uploadImg(@RequestParam("files") List<MultipartFile> files){System.out.println("files = " + files);for (MultipartFile file : files) {if (!file.isEmpty()) {try {// 构建真实的文件路径Path path = Paths.get(attractionLocation + file.getOriginalFilename());// 确保目录路径存在Files.createDirectories(path.getParent());// 将上传文件保存到指定位置file.transferTo(path);// 或者使用这种方式// byte[] bytes = file.getBytes();// Files.write(path, bytes);System.out.println("保存成功");} catch (IOException e) {e.printStackTrace();System.out.println( "上传失败");}}else {System.out.println("失败");}}}
}

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

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

相关文章

VS Code常用前端开发插件和基础配置

VS Code插件安装 VS Code提供了非常丰富的插件功能&#xff0c;根据你的需要&#xff0c;安装对应的插件可以大大提高开发效率。 完成前端开发&#xff0c;常见插件介绍&#xff1a; 1、Chinese (Simplified) Language Pack 适用于 VS Code 的中文&#xff08;简体&#xff…

【原创】基于分位数回归的卷积长短期结合注意力机制的神经网络(CNN-QRLSTM-Attention)回归预测的MATLAB实现

基于分位数回归的卷积长短期结合注意力机制的神经网络&#xff08;CNN-QRLSTM-Attention&#xff09;是一种用于时间序列数据预测的深度学习模型。该模型结合了卷积神经网络&#xff08;CNN&#xff09;、长短期记忆网络&#xff08;LSTM&#xff09;和注意力机制&#xff08;A…

小白用Windows(ssh)连接使用 ubuntu(虚拟机)

安装ssh sudo apt install openssh-server 添加用户、密码 sudo useradd fly sudo passwd fly sudo adduser fly sudo 免密登入 [windows 生成密钥&#xff1a;ssh-keygen -t rsa -b 4096 cat ~/.ssh/id_rsa.pub | ssh fly192.168.23.133 "mkdir -p ~/.ssh…

C# 文件

FileStream 类FileModeFileAccessFileShare StreamReader 类和StreamWriter类StreamReader 类StreamWriter类关于using FileStream 类 FileStream <object_name> new FileStream( <file_name>, <FileMode Enumerator>, <FileAccess Enumerator>, <…

数据治理-平台详细措施

这里讲平台治理的具体措施&#xff0c;并不是从具体架构来说&#xff0c;而是从详细方法。 名词定义 1.待治理成本 2.浪费量&#xff1a;可以优化计算或者存储 3.累计浪费量&#xff1a;发现时距离今天数*当日浪费量 4.节省成本&#xff1a;完成治理成本 5.白名单管理成本 治理…

C++ 数组 结构编程题

一 求100以内的所有素数 /* * 需要标记2~100 之间的数是否处理 * 用数组&#xff0c;初始为0 表示都是素数&#xff0c;如果 判断为合数则置为1过用 */ #include<stdio.h> #include<math.h> int main() {const int n 100;int isPrim[n 1] { 0 };int i, j;for (…

MAC的Safari浏览器没有声音解决办法

有一段时间没打开电脑&#xff0c;也不知道是系统自动更新或是什么缘故&#xff0c;所有浏览器都无法正常发声。 现象如下&#xff1a; 首先&#xff0c;Safari浏览器无法自动播放声音&#xff0c;下载的360浏览器现象一致&#xff0c;但是播放其他音乐播放软件和视频软件都正…

【开发工具】Ubuntu复制CSDN代码多余符号的去除

在Ubuntu中使用CSDN复制的代码时&#xff0c;可能会出现\u200的符号&#xff0c;这个符号会影响代码的编译和运行&#xff0c;因此需要找到一种快速删除这种符号的方法。 通过搜索找到了一种替换为空的删除方式&#xff0c;笔者编写了一个适用于Rust的shell脚本&#xff0c;需要…

JavaScript(二)---【js数组、js对象、this指针】

零.前言 JavaScript(一)---【js的两种导入方式、全局作用域、函数作用域、块作用域】-CSDN博客 一.js数组 在js中也有数组的概念&#xff0c;数组使用“[]”定义&#xff0c;其中数组中还可以嵌套数组从而达到多层数组的作用。 访问数组中的某个元素&#xff0c;我们可以直…

pymysql使用记录

最近由于需要来学习一下pymysql。 先来认识一下pymysql&#xff1a; PyMySQL 是 Python 中一个用于连接 MySQL 数据库的库。它允许 Python 程序通过简单的 API 调用来连接、操作和管理 MySQL 数据库。PyMySQL 是在 Python 中使用纯 Python 编写的&#xff0c;因此它可以在几…

一些常见的MySQL问题和答案

什么是MySQL&#xff1f;MySQL的存储引擎有哪些&#xff1f;它们有什么区别&#xff1f; MySQL是一个开源的关系型数据库管理系统&#xff0c;用于存储和管理大量结构化数据。 MySQL的存储引擎包括InnoDB、MyISAM、Memory等。它们在事务支持、并发性能、数据完整性等方面有所不…

MySQL编程实战LeetCode经典考题

文章简介 本文主要收集了LeetCode上关于MySQL的一些经典考题。 后续也会陆续把所有经典考题补充完整。 175.组合两个表 175.组合两个表 解答&#xff1a; select p.FirstName as firstName, p.LastName as lastName,a.City as city, a.State as state from Person p l…

【MogDB】解读MogDB5.0.6版本中有关兼容性的一些更新

前言 MogDB于2024-03-30发布了其5.0版本的补丁版本—5.0.6&#xff0c;其在MogDB 5.0.5的基础上新增部分特性并修复了部分缺陷&#xff0c;具体内容可参考官方文档 # MogDB 5.0.6发布说明 相信有一些伙伴和我一样对兼容性的部分感兴趣&#xff0c;因此本篇就针对本次更新的一些…

loadbalancer 引入与使用

在消费中pom中引入 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-loadbalancer</artifactId> </dependency> 请求调用加 LoadBalanced 注解 进行服务调用 默认负载均衡是轮训模式 想要切换…

【b站李炎恢】Vue.js Element UI 下 | 十天技能课堂 | 更新中... | 李炎恢

课程地址&#xff1a;【Vue.js Element UI | 十天技能课堂 | 更新中... | 李炎恢】 https://www.bilibili.com/video/BV1U54y127GB/?share_sourcecopy_web&vd_sourceb1cb921b73fe3808550eaf2224d1c155 备注&#xff1a;虽然标题声明还在更新中&#xff0c;但是看一些常用…

vue知识点: v-if和v-for为何不能同时使用?

在vue2和vue3的官方文档里都写到不推荐 v-if和v-for同时使用&#xff0c;如下代码所示&#xff1a; <li v-for"todo in todos" v-if"!todo.isComplete">{{ todo.text }} </li> 一、vue3文档&#xff1a;列表渲染 | Vue.js 在vue3中&#xff…

将Python程序打包为Windows安装包

本文使用创作助手。 如果你想将Python程序打包为Windows安装包&#xff0c;你可以使用NSIS&#xff08;Nullsoft Scriptable Install System&#xff09;工具。NSIS是一个免费的Windows安装包创建工具。 以下是使用NSIS将Python程序打包为Windows安装包的步骤&#xff1a; 首…

Python库使用介绍 LivermorE AI Projector for Computed Tomography LEAP

Python库使用介绍 LivermorE AI Projector for Computed Tomography LEAP 前言Projector 用于设定投影参数的类参数解释&#xff1a;其它功能load_param(str filepath)forward(ipt, project_mode"forward") 样例代码后记 前言 github开源代码 python API文档 作为一…

TypeScript-自动编译

1.生成文件 tsc --init 2.修改配置文件 说明&#xff1a;通过CTRLF搜索到以下单词&#xff0c;进行修改。 "strict": true, //是否开启严格模式 "outDir": "./outFile", //表示ts文件最终编译为js文件&#xff0c;js文件存放的位置 3.新…

pytorch中的torch.nn.Linear

torch.nn.Linear是pytorch中的线性层&#xff0c;应该是最常见的网络层了&#xff0c;官方文档&#xff1a;torch.nn.Linear。 torch.nn.Linear(in_features, out_features, biasTrue, deviceNone, dtypeNone)其中&#xff0c;in_features表示输入的维度&#xff1b;out_featu…