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

news2024/11/24 11:49:38

阿丹:

        在二次开发若依的过程中发现若依的图片上传的默认的是在本地,在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.coloradmin.cn/o/701989.html

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

相关文章

【零基础入门学习Python---Python网络编程之django快速入门实践】

🚀 Python 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持,因为它具有很高的价值,算法就是这样✨ 🌲 作者简介:硕风和炜,…

mac 文件批量重命名001开始

mac 文件批量重命名001开始,怎么操作?我们平时在整理办公文件的时候,经常需要对文件的名称进行修改,将文件修改为数字形式的名称,例如001、002、003、004......这样的形式,尤其是某项工作涉及非常多文件的时…

Spring Boot 中的 WebSocket 是什么,原理,如何使用

Spring Boot 中的 WebSocket 是什么,原理,如何使用 前言 WebSocket 是一种支持双向通信的网络协议,可以让客户端和服务器之间实现实时通信。Spring Boot 提供了对 WebSocket 的支持,可以方便地在应用程序中实现实时通信功能。本…

LangChain大型语言模型(LLM)应用开发(一):Models, Prompts and Output Parsers

LangChain是一个基于大语言模型(如ChatGPT)用于构建端到端语言模型应用的 Python 框架。它提供了一套工具、组件和接口,可简化创建由大型语言模型 (LLM) 和聊天模型提供支持的应用程序的过程。LangChain 可以轻松管理与语言模型的交互&#x…

iOS App的上架和版本更新流程

一、前言: 作为一名iOSDeveloper,把开发出来的App上传到App Store是必要的。下面就来详细讲解一下具体流程步骤。 二、准备: 一个已付费的开发者账号(账号类型分为个人(Individual)、公司(Com…

2023上半年软考系统分析师科目一整理-17

2023上半年软考系统分析师科目一整理-17 计算机系统的性能一般包括两个大的方面。一个方面是它的(),也就是计算机系统能正常工作的时间,其指标可以是能够持续工作的时间长度,也可以是在一段时间内,能正常工…

【域名详解】网络杂谈(13)之深入简出了解什么是域名

涉及知识点 什么是域名,域名的概念,域名的结构,域名地址的寻址过程,深入了解域名的寻址机制。 原创于:CSDN博主-《拄杖盲学轻声码》,更多内容可去其主页关注下哈,不胜感激 文章目录 涉及知识点…

【工作记录】基于CSS+JS可拖拽改变大小、可吸附到边界的DIV

记录一段实现可拖拽、可自动吸附到边界的代码。 <!DOCTYPE html> <html lang"en"> <head><style>body {overflow: hidden;}#pane {position: absolute;width: 45%;height: 45%;top: 20%;left: 20%;margin: 0;padding: 0;z-index: 99;border…

青岛大学_王卓老师【数据结构与算法】Week03_07_线性表的链式表示和实现7_学习笔记

本文是个人学习笔记&#xff0c;素材来自青岛大学王卓老师的教学视频。 一方面用于学习记录与分享&#xff0c;另一方面是想让更多的人看到这么好的《数据结构与算法》的学习视频。 如有侵权&#xff0c;请留言作删文处理。 课程视频链接&#xff1a; 数据结构与算法基础–…

【Java项目】拉取公司GitLab项目的教程

文章目录 创建Git账号登录Git 创建Git账号 进入公司后&#xff0c;会拿到公司给你注册的邮箱以及密码&#xff0c;你得到用户名和密码之后&#xff0c;需要先创建一个拉取这个仓库对应的git账号。 我们先登录GitLab 当你登录GitLab之后&#xff0c;会显示你还没有ssh key&…

基于matlab使用基本形态运算符和 blob分析的组合从视频流中提取信息(附源码)

一、前言 此示例演示如何使用基本形态运算符和 blob 分析的组合从视频流中提取信息。在本例中&#xff0c;该示例计算每个视频帧中大肠杆菌的数量。请注意&#xff0c;细胞的亮度各不相同&#xff0c;这使得分割任务更具挑战性。 形态运算符是一种图像处理中常用的操作&#…

Linux系统部署BBR服务器加速软件

1. BBR加速软件介绍 BBR简介&#xff1a;   BBR是谷歌的黑科技&#xff0c;也可以理解为用来加速网络的软件&#xff0c;如果服务器在海外&#xff0c;会发现丢包率很高&#xff0c;线路还会时断时续。所以&#xff0c;不用点黑科技&#xff0c;肯定是没办法使用。而BBR加速能…

团体程序设计天梯赛-练习集L2篇⑨

&#x1f680;欢迎来到本文&#x1f680; &#x1f349;个人简介&#xff1a;Hello大家好呀&#xff0c;我是陈童学&#xff0c;一个与你一样正在慢慢前行的普通人。 &#x1f3c0;个人主页&#xff1a;陈童学哦CSDN &#x1f4a1;所属专栏&#xff1a;PTA &#x1f381;希望各…

Redis 安装配置 常用命令

---------------------- 关系数据库与非关系型数据库 ---------------------------------------- ●关系型数据库&#xff1a; 关系型数据库是一个结构化的数据库&#xff0c;创建在关系模型&#xff08;二维表格模型&#xff09;基础上&#xff0c;一般面向于记录。 SQL 语句&…

Tomcat的安装部署

tomcat安装部署 tomcat安装部署 一、概述&#xff1a;1.tomcat介绍&#xff1a;2.tomcat核心组件&#xff1a;3.tomcat处理内部请求&#xff08;数据流向图&#xff09;4.tomcat服务部署&#xff1a; 二、虚拟主机配置&#xff1a;1.创建 chan 和 baek 项目目录和文件&#xf…

【C语言初阶(5)】循环练习题

文章目录 1. 计算 n 的阶乘2. 计算 1!2!3!……10!3. 使用二分查找法查找某数二分查找算法介绍代码实现 4. 演示字符移动5. 模拟用户登录场景 1. 计算 n 的阶乘 阶乘 某个数从 1 开始一直乘到这个数本身为止&#xff1b; 例如&#xff1a;3 的阶乘就是 1 * 2 * 3 6&#xff1b…

利用SpringBoot整合mybatis

代码地址&#xff1a;https://gitee.com/jkangle/springboot-exercise.git 1.构建SpringBoot项目 注意版本不能太高版本太高会出现问题整体的项目结构如图 2.导入Mybatis依赖 <!-- https://mvnrepository.com/artifact/org.mybatis/mybatis --><dependency>&l…

vim 对js文件和txt的操作不同

vim 对js文件和txt的操作不同 https://www.runoob.com/w3cnote/ascii.html 同样一段话&#xff0c;vim 123.txt 和 vim 123.js &#xff0c;将下面这些内容复制&#xff0c;然后粘贴&#xff0c; 显示的效果不一样 .js文件 会把 0D 0A 变换为 0A 09 import { request } from…

图像去模糊:RSBlur 数据集以及模糊图像合成方法

本内容主要介绍图像去模糊数据集 RSBlur&#xff0c;以及逼真模糊图像合成方法。 论文&#xff1a;Realistic Blur Synthesis for Learning Image Deblurring 代码&#xff08;官方&#xff09;&#xff1a;https://github.com/rimchang/RSBlur 1.1 背景 运动模糊是由曝光…

89C52RC普中单片机-4

20230629 Thusday lcd1602代码 lcd1602.c #include <REGX52.H>//引脚配置&#xff1a; sbit LCD_RSP2^6; sbit LCD_RWP2^5; sbit LCD_ENP2^7; #define LCD_DataPort P0//函数定义&#xff1a; /*** brief LCD1602延时函数&#xff0c;12MHz调用可延时1ms* param 无*…