【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);}

        很普通的一个文件上传接口,仅接收一个文件流并进行本地存储后名称为:时间戳-文件名,

后端进行测试没有问题

三、调试效果实现

        

 

前端显示图片上传成功

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

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

相关文章

【C语言】循环语句(语句使用建议)

文章目录 **while循环****while循环的实践****补充:if语句与while语句区别****for循环(使用频率最高)****for循环的实践****while循环和for循环的对比****Do-while循环****break和continue语句****循环的嵌套****goto语句(不常用)****循环语句的效率(来自于高质量的C/C编程书籍…

nRF Sniffer在wireshark下的环境搭建

一、准备 nRF Sinffer 安装包&#xff1a; 直接下载&#xff1a;https://nsscprodmedia.blob.core.windows.net/prod/software-and-other-downloads/desktop-software/nrf-sniffer/sw/nrf_sniffer_for_bluetooth_le_4.1.1.zip 官网下载&#xff1a; nRF Sniffer for Bluetooth…

webpack中常见的Plugin?解决了什么问题?

一、是什么 Plugin&#xff08;Plug-in&#xff09;是一种计算机应用程序&#xff0c;它和主应用程序互相交互&#xff0c;以提供特定的功能 是一种遵循一定规范的应用程序接口编写出来的程序&#xff0c;只能运行在程序规定的系统下&#xff0c;因为其需要调用原纯净系统提供…

Flask学习(五):flask中添加装饰器

一、注意装饰器函数所在的位置&#xff1a; 代码示例如下&#xff1a; from flask import Flaskapp Flask(__name__)def wapper(func):def inner(*args, **kwargs):print("执行了装饰器")return func(*args, **kwargs)return innerwapper app.route("/index1…

CTF题型 匿名函数考法例题总结

CTF题型 匿名函数考法&例题总结 文章目录 CTF题型 匿名函数考法&例题总结一 .原理分析二 .重点匿名函数利用1.create_function()如何实现create_function代码注入 2.array_map()3.call_user_func()4.call_user_func_array()5.array_filter() 三.例题讲解1.[Polar 靶场 …

【WEB3安全基建项目Secwarex】空投指南

GoPlusSecurity是WEB3安全基建项目&#xff0c;3月8日完成400万美元的私募融资&#xff0c;目前总融资已经高达1500万美元&#xff0c;其中包括Binance Labs、Huobi Incubator、Kucoin Ventures、Avalanche等知名机构参投。 1、打开网址&#xff1a;secwarex.io&#xff0c;点…

【考研数学】武忠祥全年各阶段用书搭配

正常来说&#xff0c;你已经跟了武忠祥老师&#xff0c;那武老师的高数辅导讲义和严选题&#xff0c;应该你都有入手了&#xff0c;这个时候你再加一本1800&#xff0c;如何能够保证有充分的时间&#xff0c;将这些习题册做透&#xff0c;将它们的最大作用发挥出来呢&#xff0…

Vue3 v-model的使用

简介 使用场景&#xff1a;1 用于表单input、textarea以及select元素上创建双向数据绑定 2 用于组件间数据的通信 一个小栗子&#xff0c;第一个使用场景的代码 <template><div class"box"><div class"intro"><el-input v…

【C++】仿函数优先级队列反向迭代器

目录 一、优先级队列 1、priority_queue 的介绍 2、priority_queue 的使用 3、 priority_queue 的模拟实现 1&#xff09;priority_queue()/priority_queue(first, last) 2&#xff09;push&#xff08;x&#xff09; 3&#xff09;pop&#xff08;&#xff09; 4&#…

Vue+Element-UI Table表格实现复选框单选效果(隐藏表头上的全选Checkbox)

实现效果 完整代码 <div class"box-pos"><el-table ref"table" :header-cell-style"{ color: #FFF, background: #333 }":cell-style"{ color: #FFF, background: #333 }" :data"grListData" style"width: 1…

前端知识点03(JS)

文章目录 前端知识点03&#xff08;JS&#xff09;1、JS中this指向问题2、script中的async和defer的区别3、setTimeOut和setInterval4、Es6和ES5的区别5、ES6的新特性 &#x1f389;写在最后 前端知识点03&#xff08;JS&#xff09; hello hello~ &#xff0c;这里是 code袁~&…

python日常刷题(一)

前言&#xff1a;本文记录2024年3月11日至2024年3月19日牛客网所做的基础题目&#xff08;错题本&#xff09;&#xff1a; &#x1f3ac;个人简介&#xff1a;努力学习ing &#x1f4cb;本专栏&#xff1a;python日常刷题 &#x1f380;CSDN主页&#xff1a;愚润求学 文章目录…

软件的安装与卸载(YUM)

YUM&#xff1a;yum 是一个方便的"应用商店"&#xff0c;你可以通过它轻松地安装、更新和删除软件包&#xff0c;就像从应用商店中下载和安装应用程序一样。&#xff08;这个得用root身份&#xff0c;普通用户权限不够&#xff09; 常用命令&#xff1a; 1.安装软件…

路径优化算法 | matlab遗传算法多配送中心路径优化

在MATLAB中使用遗传算法来解决多配送中心路径优化问题,通常涉及到复杂的组合优化问题。多配送中心路径优化问题(也称为车辆路径问题,Vehicle Routing Problem with Multiple Depots, VRPMD)是旅行商问题(TSP)的扩展,其中存在多个配送中心,每个配送中心有一定数量的车辆…

工作需求ElementUi组件的使用

加油&#xff0c;新时代打工人&#xff01; 组件源码 <template><div mouseenter"mousein true" mouseleave"mousein false"><el-input type"text" clearable autocomplete"off" v-model"searchDoc.originName…

7.安全性基础知识

主要议题&#xff1a; 安全防护体系&#xff1a;7层次&#xff0c;要记7层次的名称以及这些层次与哪些方面相关&#xff1b; 安全保护等级&#xff1a;5等级&#xff0c;要记5等级安全性的高低排序&#xff0c;掌握每个等级的特点&#xff1b; 用户认证机制&#xff1a;用户认…

[小程序开发] npm

一、自定义构建npm 1、在project.config.json文件中的 "miniprogramRoot"指定小程序源码目录。 "miniprogramRoot": "miniprogram/", 2、在project.config.json文件中的setting.packNpmManually为true&#xff0c;开启自定义node_modules和minip…

bert源码分析之tokenization

import collections# 集合模块 import re# 正则模块 import unicodedata#判断字符类别模块 import six#判断版本 import tensorflow as tf # 用于检查传入的参数do_lower_case和真正的模型是否一致 # do_lower_case: 一个布尔值&#xff0c;表示是否将文本转换为小写 # init_ch…

python网络爬虫实战教学——urllib的使用(2)

文章目录 专栏导读1、前言2、URLError3、HTTPError4、urlparse5、urlunparse 专栏导读 ✍ 作者简介&#xff1a;i阿极&#xff0c;CSDN 数据分析领域优质创作者&#xff0c;专注于分享python数据分析领域知识。 ✍ 本文录入于《python网络爬虫实战教学》&#xff0c;本专栏针对…

牛客刷题 | HJ68 成绩排序, HJ69 矩阵乘法,HJ70 矩阵乘法计算量估算

HJ68 成绩排序 题目链接 思路建立字典&#xff0c;key代表名字&#xff0c;value为数字&#xff0c;最后sorted函数按规定排序。注意名单中的名字会重名&#xff0c;所以key应该是名字加上编号&#xff0c;以免同名的分数被覆盖。将编号填充为3位数&#xff0c;方便最后输出名…