若依-vue图片上传本地改OSS前台以及后台-附带oss图片上传工具类

阿丹:

        在二次开发若依的过程中发现若依的图片上传的默认的是在本地,在spring-vue版本中,如果要将平台上线那么就需要考虑这个问题,要使用fastdfs或者oss来完成代替本地的图片上传。

本篇文章我使用了oss来完成图片上传以及前台的api添加拼接路径完成

后台代码

我们首先要了解和观察若依后台是如何进行图片上传的

这里是若依后台图片上传的代码,通过本地图片上传的工具类,来完成图片上传。

  @PostMapping("/upload")public AjaxResult uploadFile(MultipartFile file) throws Exception{try{// 上传文件路径String filePath = RuoYiConfig.getUploadPath();
//            String fileName = OssUtil.uploadMultipartFile(file);
//            System.out.println(fileName);// 上传并返回新文件名称String fileName = FileUploadUtils.upload(filePath, file);String url = fileName;AjaxResult ajax = AjaxResult.success();ajax.put("url", url);ajax.put("fileName", fileName);ajax.put("newFileName", fileName);ajax.put("originalFilename", file.getOriginalFilename());return ajax;}catch (Exception e){return AjaxResult.error(e.getMessage());}}

通过图片上传之后,使用ajax来封装了返回值内容,在前台进行赋值。 

后台二开思路

 通过引用oss上传工具类来完成图片上传的路径来完成。

并将返回值进行替换即可

这里提供一下我的oss图片上传的工具类

oss文件上传工具类

package com.ruoyi.common.utils.file;import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.model.GetObjectRequest;
import com.aliyun.oss.model.PutObjectRequest;
import lombok.extern.log4j.Log4j2;
import org.springframework.web.multipart.MultipartFile;import java.io.*;
import java.time.LocalDateTime;
import java.util.UUID;/*** Oss服务调用*/
@Log4j2
public class OssUtil {/*** Endpoint 存储对象概述  阿里云主账号AccessKey,accessKeySecret拥有所有API的访问权限  访问路径前缀  存储对象概述*/private static String endPoint = "oss-cn-shanghai.aliyuncs.com";private static String accessKeyId = "替换成自己的accessKeyId ";private static String accessKeySecret = "替换成自己的accessKeySecret";private static String accessPre = "https://dzlmuyu.oss-cn-shanghai.aliyuncs.com/";/*** bucket名称* @return*/private static String bucketName = "dzlmuyu";private static OSS ossClient ;static {ossClient = new OSSClientBuilder().build(endPoint,accessKeyId,accessKeySecret);log.info("oss服务连接成功!");}/*** 默认路径上传本地文件* @param filePath*/public static String uploadFile(String filePath){return uploadFileForBucket(bucketName,getOssFilePath(filePath) ,filePath);}/*** 默认路径上传multipartFile文件* @param multipartFile*/public static String uploadMultipartFile(MultipartFile multipartFile) {return uploadMultipartFile(bucketName,getOssFilePath(multipartFile.getOriginalFilename()),multipartFile);}/*** 上传 multipartFile 类型文件* @param bucketName* @param ossPath* @param multipartFile*/public static String uploadMultipartFile(String bucketName , String ossPath , MultipartFile multipartFile){InputStream inputStream = null;try {inputStream = multipartFile.getInputStream();} catch (IOException e) {e.printStackTrace();}uploadFileInputStreamForBucket(bucketName, ossPath, inputStream);return accessPre+ossPath;}/*** 使用File上传PutObject上传文件 ** 程序默认使用次方法上传* @param bucketName 实例名称* @param ossPath oss存储路径* @param filePath 本地文件路径*/public static String uploadFileForBucket(String bucketName , String ossPath , String filePath) {// 创建PutObjectRequest对象。PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, ossPath, new File(filePath));// 上传ossClient.putObject(putObjectRequest);return accessPre+ossPath;}/*** 使用文件流上传到指定的bucket实例* @param bucketName 实例名称* @param ossPath oss存储路径* @param filePath 本地文件路径*/public static String uploadFileInputStreamForBucket(String bucketName , String ossPath , String filePath){// 填写本地文件的完整路径。如果未指定本地路径,则默认从示例程序所属项目对应本地路径中上传文件流。InputStream inputStream = null;try {inputStream = new FileInputStream(filePath);} catch (FileNotFoundException e) {e.printStackTrace();}// 填写Bucket名称和Object完整路径。Object完整路径中不能包含Bucket名称。uploadFileInputStreamForBucket(bucketName, ossPath, inputStream);return accessPre+ossPath;}public static void uploadFileInputStreamForBucket(String bucketName , String ossPath , InputStream inputStream ){ossClient.putObject(bucketName, ossPath, inputStream);}/*** 下载* @param ossFilePath* @param filePath*/public static void downloadFile(String ossFilePath , String filePath ){downloadFileForBucket(bucketName , ossFilePath , filePath);}/*** 下载* @param bucketName 实例名称* @param ossFilePath oss存储路径* @param filePath 本地文件路径*/public static void downloadFileForBucket(String bucketName , String ossFilePath , String filePath ){ossClient.getObject(new GetObjectRequest(bucketName, ossFilePath), new File(filePath));}/**** @return*/public static String getOssDefaultPath(){LocalDateTime now = LocalDateTime.now();String url =now.getYear()+"/"+now.getMonth()+"/"+now.getDayOfMonth()+"/"+now.getHour()+"/"+now.getMinute()+"/";return url;}public static String getOssFilePath(String filePath){String fileSuf = filePath.substring(filePath.indexOf(".") + 1);return getOssDefaultPath() + UUID.randomUUID().toString() + "." + fileSuf;}}

后台二开更改

引入oss工具类,

 使用oss工具类的uploadMultipartFile(file)这个方法,返回的直接就是可访问的路径,也就是说直接就是静态资源。所以可以直接将fileName赋值,将原本的代码注释掉。

后台修改完成

 前台二开更改

后台更改完毕现在出现问题为:

        

发现后台可以成功上传,但是前台图片无法正常回显

检查元素发现

图片的src被添加上前缀“/dev-api”

通过ruoyi-ui中的文件发现问题,在配置返回的原因后将路径进行了拼接。 

所以只需要将拼接的代理注释掉即可。 

功能测试正常 

 

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

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

相关文章

【pytorch函数笔记】torch.sum()、torch.unsqueeze()

1.torch.sum torch.sum(imgs, dim0) # 按列求和 torch.sum(imgs, dim1) # 按行求和 imgs torch.Tensor([i for i in zip( range(10), range(10))]) print(imgs) s1torch.sum(imgs, dim0) # 按列求和 s2torch.sum(imgs, dim1) # 按行求和 print(s1) print(s2) 2.torch.uns…

【HTTP 协议】

一、HTTP 协议简介 在真实的网络环境中采用 TCP/IP 五层网络传输模型这样的结构传输. 物理层 -> 数据链路层 -> 网络层 -> 传输层 -> 应用层 1. 应用层: 应用层是模型的最顶层,它为用户提供了一种与网络进行通信的方法。应用层包含了各种应用程序&…

网络抓包工具

目录 Wiresharktcpdump Wireshark Wireshark中的关键字 Seq和Ack是随机生成的,wireshark将Seq和Ack的初始值都设为0,即用“相对值”代替“真实值”方便查看。使用Edit——Preferences——Protocols——TCP选项中的Relative Sequence Numbers来选择启用在…

Jmeter

GUI Http访问接口测试 新建Thread Group、HTTP Request等四个功能,剩下两个在Listener Thread Group是新建测试用例,设置线程数。 HTTP Request 发送请求,设置服务的IP、端口号、请求方式、路径、编码方式、传入数据的Name、Value、Conten…

N-121基于微信小程序网上书城系统

开发工具:IDEA、微信小程序 服务器:Tomcat9.0, jdk1.8 项目构建:maven 数据库:mysql5.7 前端技术:vue、uniapp 服务端技术:springbootmybatisredis 本系统分微信小程序和管理后台两部分&a…

设计模式学习之抽象工厂模式

设计模式系列往期文章 设计模式学习之策略模式设计模式学习之策略模式在前端的应用设计模式学习之简单工厂模式设计模式学习之工厂方法模式 如果你已经理解了工厂方法模式,那你能够很快的明白抽象工厂模式。 温习:什么是工厂方法模式 我们先温习一下…

obs源码分析与调试:obs初始化过程

英语能力比较好的读者可以先看看官方文档:obsproject.com/docs/backen… OBS 的后端(即 libobs)使用 C 语言实现,提供了最核心的功能,包括:主流程、音视频子系统、通用的插件框架。 core/libobs/libobs 定…

基于微信小程序的上课签到系统(数据库+报告+文档+演示视频)

系统技术语言介绍: 本系统采用了SSM (Spring Spring MVC Mybatis)架构, MySQL作为基础数据库,微信开发工具作为前端基础,前端采用了 wxml的设计语言,Idea作为后台的开发工具。 功能列表: 1.…

RabbitMQ 能保证消息可靠性吗

系列文章目录 消息队列选型——为什么选择RabbitMQ RabbitMQ 五种消息模型 RabbitMQ 能保证消息可靠性吗 系列文章目录前言一、消息可靠性的定义二、几种不可靠的场景三、防意外丢失1. 消息持久化2. 队列持久化3. 发布确认3.1 简单发布确认3.2 批量发布确认3.3 异步发布确认 4…

深度学习视角下的视频息肉分割

结直肠癌(CRC)是全球第二大致命癌症和第三大常见的恶性肿瘤,据估计每年会在全球范围内造成数百万人发病和死亡。结直肠癌患者在第一阶段的生存概率超过95%,但在第四和第五阶段却大幅下降到35%以下。因此,通过结肠镜、乙状结肠镜等筛查技术对阳…

【学习周报】

最近看过的几篇论文里,VALOR和InstructBLIP模型使用了cross-attention机制,以这两篇论文为基础着重学习cross-attention相关的代码和思路。 学习内容: cross-attention机制学习lstm与transformer 学习时间: 6.26 ~ 7.1 学习笔记…

ModaHub AI模型开源社区——向量数据库Milvus存储操作教程

目录 存储操作 数据插入 数据落盘 定时触发 客户端触发 缓冲区达到上限触发 数据合并 建立索引 删除 删除集合 删除分区 删除实体 数据段整理 数据读取 常见问题 存储操作 阅读本文前,请先阅读 存储相关概念。 数据插入 客户端通过调用 insert 接…