若依-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中的文件发现问题，在配置返回的原因后将路径进行了拼接。
所以只需要将拼接的代理注释掉即可。
功能测试正常
