【Vue】三、使用ElementUI实现图片上传
目录
一、前端代码实现
二、后端代码实现
三、调试效果实现
一、前端代码实现
废话不多说直接上代码
<el-form-item prop="image" label="上传图片" v-model="form.image"><el-upload:action="'http://localhost:8080/files/upload'"list-type="picture-card"limit="1":on-exceed="limitError":on-success="imgSuccess":on-error="imgError"><i class="el-icon-plus"></i></el-upload></el-form-item>
这里用了elementUI的一个简单的例子,自己又改了一些,简单讲解一下
action: 头像上传向后端发送的地址,这里后端采用了本地上传
list-type: 即文件列表的类型,就是上传后文件的样式是图片还是文字的格式
limit: 上传数量的限制,这里仅可上传一张图片
on-exceed: 上传超过限制触发的函数
on-success: 上传成功触发的函数
on-error: 上传失败触发的函数
更多参数可以参照:组件 | Element
相对应的函数如下:
// 上传成功imgSuccess(res, file) {this.imageUrl = res.data;this.form.image = this.imageUrl;console.log(res.data);},// 上传失败imgError(res) {this.$message({type: "error",message: "附件上传失败",});},// 上传数量超限limitError() {this.$message({type: "error",message: "图片仅可上传一张",});},
比较重要的是上传成功后的函数imgSuccess,此函数需要根据实际项目中你的form表单的值或者构建的data进行绑定操作,确保图片地址能被后端存储便于后续展示
二、后端代码实现
/*** 文件上传*/@PostMapping("/upload")public Result upload(MultipartFile file) {if(file == null || file.isEmpty()) {return Result.error(400,"上传文件为空");}String flag;synchronized (FileController.class) {flag = System.currentTimeMillis() + "";ThreadUtil.sleep(1L);}String fileName = file.getOriginalFilename();try {if (!FileUtil.isDirectory(filePath)) {FileUtil.mkdir(filePath);}// 文件存储形式:时间戳-文件名FileUtil.writeBytes(file.getBytes(), filePath + flag + "-" + fileName);System.out.println(fileName + "--上传成功");System.out.println("文件上传地址"+filePath);} catch (Exception e) {System.err.println(fileName + "--文件上传失败");return Result.error(400,"文件上传失败");}String http = "http://" + ip + ":" + port + "/files/";return Result.success(http + flag + "-" + fileName);}
很普通的一个文件上传接口,仅接收一个文件流并进行本地存储后名称为:时间戳-文件名,
后端进行测试没有问题

三、调试效果实现


前端显示图片上传成功
相关文章:
【Vue】三、使用ElementUI实现图片上传
目录 一、前端代码实现 二、后端代码实现 三、调试效果实现 一、前端代码实现 废话不多说直接上代码 <el-form-item prop"image" label"上传图片" v-model"form.image"><el-upload:action"http://localhost:8…...
ffmpeg的ffprobe.exe查询修改视频信息
# 查询视频信息 ffprobe -i 1.mp4Input #0, mov,mp4,m4a,3gp,3g2,mj2, from video.mp4:Metadata:major_brand : isomminor_version : 512compatible_brands: isomiso2avc1mp41encoder : Lavf58.20.100comment : 123654Duration: 00:00:15.21, start: 0.0…...
Windows 2019服务器上安装NFS服务器
提供NFS服务服务器: Windows 2019服务器上安装NFS服务器资源管理器 创建目录比如D:\nfshare, 鼠标邮件菜单 点击 属性,进行NFS共享 使用NFS服务的客户端: 另外一台Windows服务器,需要安装NFS客户端 具体操作:Window…...
元素定位之xpath和css
元素定位 xpath绝对路径相对路径案例xpath策略(路径)案例xpath策略(层级、扩展)属性层级与属性层级与属性拓展层级与属性综合 csscss选择器(id、类、标签、属性)id选择器类选择器标签选择器属性选择器案例-…...
JavaScript 什么是纯函数,有哪些常见的纯函数
什么是纯函数 纯函数是指那些不依赖于外部状态,也不改变外部状态的函数。在JavaScript中,纯函数的返回值仅由其输入参数决定,而且执行纯函数不会产生副作用,比如修改全局变量或修改传入的参数。 常见的纯函数 JavaScript中一些常…...
c++ 指针大小
C的一个指针占内存几个字节? 结论: 取决于是64位编译模式还是32位编译模式(注意,和机器位数没有直接关系) 在64位编译模式下,指针的占用内存大小是8字节在32位编译模式下,指针占用内存大小是4字…...
IBM SPSS Statistics:提升数据处理效率的利器
IBM SPSS Statistics软件是一款功能强大的统计软件平台,广泛应用于学术研究、市场调查、数据挖掘和业务决策等领域。其主要功能特色体现在以下几个方面: 基础描述统计功能:软件提供平均值、众数、标准差、百分位数等多种常用的统计数值&#…...
is ignored, because it exists, maybe from xml file
1、问题概述? springboot整合mybatisplus启动的时候报错信息如下: 2024-03-20 10:12:19.239 ERROR 17840 --- [ main] c.b.m.core.MybatisConfiguration : mapper[com.hazq.hazqoa.mapper.DutyTrunsMapper.dutyTrunsExistence] is …...
Spark面试整理-Spark是什么?
Apache Spark是一个开源的分布式计算系统,它提供了一个用于大规模数据处理的快速、通用、易于使用的平台。它最初是在加州大学伯克利分校的AMPLab开发的,并于2010年开源。自那时起,Spark已经成为大数据处理中最受欢迎和广泛使用的框架之一。下面是Spark的一些关键特点: 速度…...
Android 13.0 开机启动优化之PMS扫描apk耗时相关功能优化
1.前言 在android13.0的系统rom定制化开发中,在系统中开发产品时,会根据客户要求内置第三方app,这时如果内置app过多,或者安装的app过多,在系统开机的过程中 在pms扫描安装app的时候,就会比较耗时,这时候就需要优化下pms扫描安装app这块的功能代码,用多线程来实现pms扫…...
云蜜罐技术(德迅猎鹰)诞生
数字化程度高且高价值信息密集的行业,如金融、能源、互联网、政府、教育、医疗、军工等行业,面对日益规模化、专业化的网络攻击,渐渐不再满足于一味的防守加固。除了巩固防线之外,他们愈发看重主动出击、感知更大范围内的攻击&…...
ARM:汇编点灯
.text .global _start _start: 使能GPIOE和GPIOF的外设时钟 LDR R0,0x50000A28 指定寄存器地址 LDR R1,[R0] 将寄存器原来的数值读取出来,保存到R1中 ORR R1,R1,#(0x3<<4) 将第3/4位设置为1 STR R1,[R0] 将修改后的数值写回设置LED1亮 设置PE10为输出…...
69: 偷菜时间表(python)
收藏 难度:一般 标签:暂无标签 题目描述 随着“开心农场”等娱乐游戏风靡互联网,“偷菜”遂瞬间蹿红网络,席卷网民生活。 于是,“你‘偷’了吗”便成为大家见面的招呼语。很快,数百万都市白领成为“偷菜…...
【计算机视觉】三、图像处理——实验:图像去模糊和去噪、提取边缘特征
文章目录 0. 实验环境1. 理论基础1.1 滤波器(卷积核)1.2 PyTorch:卷积操作 2. 图像处理2.1 图像读取2.2 查看通道2.3 图像处理 3. 图像去模糊4. 图像去噪4.1 添加随机噪点4.2 图像去噪 0. 实验环境 本实验使用了PyTorch深度学习框架,相关操作…...
用css滤镜做颜色不同的数据卡片(背景图对于css滤镜的使用)
<template> <div class"xx_modal_maincon"><div class"xx_model_bt">履约起始日至计算日配额及履约情况</div><el-row><el-col :span"6"><div class"xx_modal_mod"><div class"mod…...
2024年第六届区块链与物联网国际会议(BIOTC 2024)即将召开!
2024年第六届区块链与物联网国际会议(简称:BIOTC 2024)将于2024 年 7 月 19 日至 21 日在日本福冈召开,旨在为来自行业、学术界和政府的研究人员、从业者和专业人士提供一个论坛,就研发区块链和物联网的专业实践进行交…...
Django动态路由实例
Django动态路由实例 先说需求: 比如我前端有两个按钮,点击按钮1跳转到user1的用户信息页面,按钮2跳转user2用户信息页面,但是他俩共用同一个视图层 直接上代码 路由层 urlpatterns [path(user/<str:username>/, views…...
基于Vue.js和D3.js的智能停车可视化系统
引言 随着物联网技术的发展,智能停车系统正逐渐普及。前端作为用户交互的主要界面,对于提供直观、实时的停车信息至关重要。 目录 引言 一、系统设计 二、代码实现 1. 环境准备 首先,确保您的开发环境已经安装了Node.js和npm。然后&…...
数据之王国:解析Facebook的大数据应用
引言 作为全球最大的社交媒体平台之一,Facebook拥有庞大的用户群体和海量的数据资源。这些数据不仅包括用户的个人信息和社交行为,还涵盖了广告点击、浏览记录等多方面内容。Facebook通过巧妙地利用这些数据,构建了强大的大数据应用系统&…...
前端小白的学习之路(ES6 一)
提示:关键字声明:let与const,长度单位:em与rem,vw与wh,解构赋值,箭头函数(简介) 目录 一、ES6介绍 二、let&const 1.let 1) 用 let 关键字声明的变量不能提前引用 2) 不允许重复声明变量 3) 可以产生块级作用…...
Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误
HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误,它们的含义、原因和解决方法都有显著区别。以下是详细对比: 1. HTTP 406 (Not Acceptable) 含义: 客户端请求的内容类型与服务器支持的内容类型不匹…...
golang循环变量捕获问题
在 Go 语言中,当在循环中启动协程(goroutine)时,如果在协程闭包中直接引用循环变量,可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下: 问题背景 看这个代码片段: fo…...
C++:std::is_convertible
C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
2021-03-15 iview一些问题
1.iview 在使用tree组件时,发现没有set类的方法,只有get,那么要改变tree值,只能遍历treeData,递归修改treeData的checked,发现无法更改,原因在于check模式下,子元素的勾选状态跟父节…...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端(Windows 使用 Git Bash,Mac/Linux 使用 Terminal)执行命令: ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明: -t rsa&#x…...
是否存在路径(FIFOBB算法)
题目描述 一个具有 n 个顶点e条边的无向图,该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序,确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数,分别表示n 和 e 的值(1…...
【VLNs篇】07:NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战,克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...
多模态图像修复系统:基于深度学习的图片修复实现
多模态图像修复系统:基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型(Stable Diffusion Inpainting)实现图像修复功能,结合文本描述和图片输入,对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...
C语言中提供的第三方库之哈希表实现
一. 简介 前面一篇文章简单学习了C语言中第三方库(uthash库)提供对哈希表的操作,文章如下: C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...
协议转换利器,profinet转ethercat网关的两大派系,各有千秋
随着工业以太网的发展,其高效、便捷、协议开放、易于冗余等诸多优点,被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口,具有实时性、开放性,使用TCP/IP和IT标准,符合基于工业以太网的…...
