【学习】若依源码(前后端分离版)之 “ 上传图片功能实现”

大型纪录片:学习若依源码(前后端分离版)之 “ 上传图片功能实现”

  • 前言
  • 前端部分
  • 后端部分
  • 结语

前言

图片上传也基本是一个项目的必备功能了,所以今天和大家分享一下我最近在使用若依前后端分离版本时,如何实现图片上传功能的经验和心得。

前端部分

在前端部分,我主要使用了两个组件来实现图片上传功能,分别是el-upload组件和vue-cropper组件。想要简单实现图片上传用el-upload就足够了。这里就以ul-upload为例,要是想要看vue-cropper的可以评论区留言。

页面相关代码:

		<el-form-item label="头像路径"><imageUpload v-model="form.avatar"/></el-form-item>

imageUpload为自定义组件,具体代码如下:

<div class="component-upload-image"><el-upload:action="uploadImgUrl"list-type="picture-card":on-success="handleUploadSuccess":before-upload="handleBeforeUpload":limit="limit":on-error="handleUploadError":on-exceed="handleExceed"name="file":on-remove="handleRemove":show-file-list="true":headers="headers":file-list="fileList":on-preview="handlePictureCardPreview":class="{hide: this.fileList.length >= this.limit}"><i class="el-icon-plus"></i></el-upload><!-- 上传提示 --><div class="el-upload__tip" slot="tip" v-if="showTip">请上传<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template><template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b></template>的文件</div><el-dialog:visible.sync="dialogVisible"title="预览"width="800"append-to-body><img:src="dialogImageUrl"style="display: block; max-width: 100%; margin: 0 auto"/></el-dialog></div>

el-upload组件是一个非常强大和灵活的上传组件,它提供了很多属性和事件来控制上传过程。以下是使用el-upload组件时用到的一些属性和事件:

  • action:这个属性用来指定上传地址,即后端接收文件的接口地址。 headers:这个属性用来指定请求头,例如携带token等信息。
  • limit:这个属性用来指定文件数量限制,例如只能上传一张图片。如果用户选择或上传的文件超过了这个限制,那么会触发on-exceed事件,该事件可以用来显示一个错误提示信息。
  • file-list:这个属性用来指定文件列表,即已经上传或者待上传的文件信息。
  • on-success:这个事件用来指定上传成功回调函数,例如显示成功提示信息。
  • on-error:这个事件用来指定上传失败回调函数,例如显示失败提示信息。
  • http-request:这个事件用来指定自定义上传请求函数,例如使用axios等工具来发送post请求,并携带相关的参数和请求头。

相关方法:

		props: {value: [String, Object, Array],// 图片数量限制limit: {type: Number,default: 5,},// 大小限制(MB)fileSize: {type: Number,default: 5,},// 文件类型, 例如['png', 'jpg', 'jpeg']fileType: {type: Array,default: () => ["png", "jpg", "jpeg"],},// 是否显示提示isShowTip: {type: Boolean,default: true}},data() {return {dialogImageUrl: "",dialogVisible: false,hideUpload: false,baseUrl: process.env.VUE_APP_BASE_API,uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址headers: {Authorization: "Bearer " + getToken(),},fileList: []};},// 删除图片handleRemove(file, fileList) {const findex = this.fileList.map(f => f.name).indexOf(file.name);if (findex > -1) {this.fileList.splice(findex, 1);this.$emit("input", this.listToString(this.fileList));}},// 上传成功回调handleUploadSuccess(res) {this.fileList.push({name: res.fileName, url: res.fileName});this.$emit("input", this.listToString(this.fileList));this.loading.close();},// 上传前loading加载handleBeforeUpload(file) {let isImg = false;if (this.fileType.length) {let fileExtension = "";if (file.name.lastIndexOf(".") > -1) {fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);}isImg = this.fileType.some(type => {if (file.type.indexOf(type) > -1) return true;if (fileExtension && fileExtension.indexOf(type) > -1) return true;return false;});} else {isImg = file.type.indexOf("image") > -1;}if (!isImg) {this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);return false;}if (this.fileSize) {const isLt = file.size / 1024 / 1024 < this.fileSize;if (!isLt) {this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} MB!`);return false;}}this.loading = this.$loading({lock: true,text: "上传中",background: "rgba(0, 0, 0, 0.7)",});},// 文件个数超出handleExceed() {this.$message.error(`上传文件数量不能超过 ${this.limit}!`);},// 上传失败handleUploadError() {this.$message({type: "error",message: "上传失败",});this.loading.close();},// 预览handlePictureCardPreview(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;},// 对象转成指定字符串分隔listToString(list, separator) {let strs = "";separator = separator || ",";for (let i in list) {strs += list[i].url.replace(this.baseUrl, "") + separator;}return strs != '' ? strs.substr(0, strs.length - 1) : '';}}

这都是作者封装好的,需要使用的话直接调用改组件就好了。

效果如下:
图一

后端部分

@PostMapping("/common/upload"):在选择图片后,默认会调用这个通用的上传方法,然后它就会返回文件名和在文件所在的路径,返回文件名是因为在修改的时候,替换掉原来的文件名。亦或者是新增的时候返回文件名。返回路径比较好理解,就相当于一个回显了嘛。

 /*** 通用上传请求*/@PostMapping("/common/upload")public AjaxResult uploadFile(MultipartFile file) throws Exception {System.out.println("i am coming");try {// 上传文件路径String filePath = RuoYiConfig.getUploadPath();// 上传并返回新文件名称String fileName = FileUploadUtils.upload(filePath, file);String url = serverConfig.getUrl() + fileName;AjaxResult ajax = AjaxResult.success();ajax.put("fileName", fileName);ajax.put("url", url);System.out.println("filename____" + ajax);return ajax;} catch (Exception e) {return AjaxResult.error(e.getMessage());}}

结语

后端通过这个方法我们就可以实现图片上传了。是不是很简单呢?如果我哪里漏了没讲可以评论私信。

那么以上就是唐某的一些理解。这次的分享就到这里了。记得一键三连~( •̀ ω •́ )✧

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

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

相关文章

FreeRTOS源码分析-11 软件定时器

目录 1 软件定时器概念及其应用 1.1 软件定时器定义 1.2 FreeRTOS软件定时器介绍 1.3 FreeRTOS软件定时器工作原理 2 软件定时器函数应用 2.1 功能需求 2.2 API 2.3 功能实现 3 软件定时器原理源码分析 3.1 软件定时器控制块 3.2 软件定时器任务&软件定时器创建 …

EIK+Filebeat+Kafka

目录 一、Kafka 概述 1&#xff09;为什么需要消息队列&#xff08;MQ&#xff09; 2&#xff09;使用消息队列的好处 &#xff08;1&#xff09;解耦 &#xff08;2&#xff09;可恢复性 &#xff08;3&#xff09;缓冲 &#xff08;4&#xff09;灵活性 & 峰值处理…

C++笔记之回调函数的演变

C笔记之回调函数的演变 code review! 文章目录 C笔记之回调函数的演变1.使用函数指针2.使用typedef加函数指针3.使用std::using加函数指针4.使用typedef加std::function5.使用std::using加std::function6.使用回调和不使用回调对比 1.使用函数指针 代码 #include <iostre…

【笔试训练】统计回文

一、单选 1、以下代码结果是什么&#xff08;&#xff09; public class foo {public static void main(String sgf[]) {StringBuffer anew StringBuffer("A");StringBuffer bnew StringBuffer("B");operate(a,b);System.out.println(a"."b);}st…

ffmpeg+intel核显实现硬解码

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、前言二、检查方法1.图形法2.nvidia-smi3.intel-gpu-tools 三、安装使用1.libva-dev2.libva-utils3.编译安装4.测试1.vainfo2.ffmpeg测试解码 总结 前言 之…

nuxt.js框架使用

1、这种框架只要页面有一个地方错&#xff0c;都会出现404或者吓人的报错界面。 如表单的prop属性&#xff0c;在data函数return对象里面该字段找不到或者不一致&#xff0c;就会报404。 2、使用字典&#xff0c;对字典进行翻译。 在plugins/methods.js文件里面&#xff0c;加…

电脑连接安卓设备显示offline

The Android is offline. This can be resolved by physically disconnecting and...用USB线连接手机和电脑&#xff0c;打开cmd&#xff0c;输入adb devices -l, adb devices -l结果显示可以识别手机&#xff0c;但是状态为offline 打开另外一个终端&#xff0c;输入 adb k…

Spring MVC程序开发

目录 1. 什么是Spring MVC? 1.1 什么是MVC 1.2 MVC和Spring MVC 的关系 1.3 为什么要学Spring MVC? 2. Spring MVC的使用 2.1 Spring MVC的创建和连接 2.1.1 项目创建 2.1.2 项目连接 2.1.2.1 连接 2.1.2.2 RequestMapping注解介绍 2.1.2.3 GetMapping和 PostMapping 2.2 获取…

EFLFK——ELK日志分析系统+kafka+filebeat架构

环境准备 node1节点192.168.40.16elasticsearch2c/4Gnode2节点192.168.40.17elasticsearch2c/4GApache节点192.168.40.170logstash/Apache/kibana2c/4Gfilebeat节点192.168.40.20filebeat2c/4G https://blog.csdn.net/m0_57554344/article/details/132059066?spm1001.2014.30…

【生成式AI】ProlificDreamer论文阅读

ProlificDreamer 论文阅读 Project指路&#xff1a;https://ml.cs.tsinghua.edu.cn/prolificdreamer/ 论文简介&#xff1a;截止2023/8/10&#xff0c;text-to-3D的baseline SOTA&#xff0c;提出了VSD优化方法 前置芝士:text-to-3D任务简介 text-to-3D Problem text-to-3D…

实例035 动画形式的程序界面

实例说明 在很多的程序界面中&#xff0c;都是以菜单或工具栏的形式显示窗体界面&#xff0c;这种显示方式是以静止状态显示的&#xff0c;界面不够生动。下面介绍一个以动画显示窗体界面的设计方法。运行本例&#xff0c;效果如图1.35所示。 技术要点 在该实例中用到了Micr…

配置nginx服务端口时-在同一个页面中打开多个地址端口-查看服务情况

1&#xff1a;把代码保存到xxx.html文件中 2&#xff1a;因为一个个端口打开查看&#xff0c;实在太麻烦了 3&#xff1a;在一个页面中查看多页的响应才能提高测试效率 <html><head><title>本地连接列表</title> </head><body><cente…

Java课题笔记~ HTTP协议(请求和响应)

Servlet最主要的作用就是处理客户端请求&#xff0c;并向客户端做出响应。为此&#xff0c;针对Servlet的每次请求&#xff0c;Web服务器在调用service()方法之前&#xff0c;都会创建两个对象 分别是HttpServletRequest和HttpServletResponse。 其中HttpServletRequest用于封…

shapely库的用法,高效处理点、线、面的几何关系和相关延申(GeoPandas 库)python

1、shapely库的基本用法 Shapely 是一个用于处理几何对象的 Python 库&#xff0c;它提供了各种函数和方法来进行空间分析和几何计算。下面是一些 Shapely 库的常见用法示例&#xff1a; 1. 创建几何对象&#xff1a; from shapely.geometry import Point, LineString, Poly…

【Flutter】【基础】CustomPaint 绘画功能,绘制各种图形(二)

CustomPaint 使用实例和代码&#xff1a; 1.canvas.drawColor 绘制背景颜色 class MyPainter1 extends CustomPainter {overridevoid paint(Canvas canvas, Size size) {//绘制背景颜色&#xff0c;整个UI 现在就是红色的canvas.drawColor(Colors.red, BlendMode.srcATop);}…

Maven安装与配置

目录 一、Maven简介1.1 概述1.2 作用1.3 仓库 二、安装三、配置3.1 配置环境变量3.2 环境变量测试3.3 配置仓库 一、Maven简介 1.1 概述 Maven是一个开源的项目管理工具&#xff0c;用于构建和管理Java项目&#xff0c;基于项目对象模型&#xff08;POM&#xff09;的概念。它…

数据库优化脚本执行报错

目录 一、执行数据库优化脚本 报错... 3 解决方法&#xff1a;... 4 1、直接注释掉RECYCLE_POOLS 赋值sql语句块... 4 2、手动修改脚本... 5 附录... 6 一、执行数据库优化脚本 报错 AutoParaAdj3.5_dm8.sql 1&#xff09;manager中报错 -20001: 执行失败, -7065 数据未…

青大数据结构【2015】

一、单选 二、简答 5.如果一组关键字&#xff0c;以不同的次序输入后建立起来的二叉排序树是否相同&#xff1f;当中序遍历这些二叉排序树时&#xff0c;其遍历的结果是否相同&#xff1f;为什么&#xff1f; 不同&#xff0c;因为输入次序不同&#xff0c;所放置的位置与上一…

Stable Diffusion - 俯视 (from below) 拍摄的人物图像 LoRA 与配置

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/132192139 图像来自 哥特风格 LoRA 俯视 LoRA&#xff0c;提升视觉冲击力&#xff0c;核心配置 <lora:view_from_below:0.6>,(from below,…

时间复杂度与空间复杂度的详解

目录 1.时间复杂度 2.时间复杂度计算例题 3.空间复杂度 1.时间复杂度 算法中的基本操作的执行次数&#xff0c;为算法的时间复杂度。 如何表达 时间复杂度&#xff1f; 大O的渐进表示法 实际中我们计算时间复杂度时&#xff0c;我们其实并不一定要计算精确的执行次数&#xf…