一、引入依賴

首先在commom 模塊的pom 下面引入 阿里云OSS 的 依賴

        <!--     阿里云oss     --><dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.17.4</version></dependency>

二、安裝x-file-store

一行代碼將文件存儲到本地、FTP、SFTP、WebDAV、阿里云 OSS、華為云 OBS、七牛云 等各個廠商。

<dependency><groupId>org.dromara.x-file-storage</groupId><artifactId>x-file-storage-spring</artifactId><version>2.3.0</version>
</dependency>

三、applacation.yml 添加相關配置

記得將? access-key 換成自己的

dromara:x-file-storage: #文件存儲配置default-platform: aliyun-oss-1 #默認使用的存儲平臺thumbnail-suffix: ".min.jpg" #縮略圖后綴，例如【.min.jpg】【.png】#對應平臺的配置寫在這里，注意縮進要對齊aliyun-oss:- platform: aliyun-oss-1 # 存儲平臺標識enable-storage: true  # 啟用存儲access-key: ??secret-key: ??end-point: ??bucket-name: ??domain: ?? # 訪問域名，注意“/”結尾，例如：https://abc.oss-cn-shanghai.aliyuncs.com/base-path: test/ # 基礎路徑

然后再啟動類上方添加? ? @EnableFileStorage 注解

@EnableFileStorage
@SpringBootApplication
public class SpringFileStorageTestApplication {public static void main(String[] args) {SpringApplication.run(SpringFileStorageTestApplication.class,args);}}

四、后端改造?

需要改造 admin模塊下的? controller/common/CommonController.java

建議直接新項目直接復制代碼使用

package com.soft.web.controller.common;import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import org.dromara.x.file.storage.core.FileInfo;
import org.dromara.x.file.storage.core.FileStorageService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import com.soft.common.config.RuoYiConfig;
import com.soft.common.constant.Constants;
import com.soft.common.core.domain.AjaxResult;
import com.soft.common.utils.StringUtils;
import com.soft.common.utils.file.FileUploadUtils;
import com.soft.common.utils.file.FileUtils;
import com.soft.framework.config.ServerConfig;/*** 通用請求處理* * @author ruoyi*/
@RestController
@RequestMapping("/common")
public class CommonController
{private static final Logger log = LoggerFactory.getLogger(CommonController.class);@Autowiredprivate ServerConfig serverConfig;@Autowiredprivate FileStorageService fileStorageService;//注入實列private static final String FILE_DELIMETER = ",";/*** 通用下載請求* * @param fileName 文件名稱* @param delete 是否刪除*/@GetMapping("/download")public void fileDownload(String fileName, Boolean delete, HttpServletResponse response, HttpServletRequest request){try{if (!FileUtils.checkAllowDownload(fileName)){throw new Exception(StringUtils.format("文件名稱({})非法，不允許下載。 ", fileName));}String realFileName = System.currentTimeMillis() + fileName.substring(fileName.indexOf("_") + 1);String filePath = RuoYiConfig.getDownloadPath() + fileName;response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE);FileUtils.setAttachmentResponseHeader(response, realFileName);FileUtils.writeBytes(filePath, response.getOutputStream());if (delete){FileUtils.deleteFile(filePath);}}catch (Exception e){log.error("下載文件失敗", e);}}/*** 通用上傳請求（單個）*/@PostMapping("/upload")public AjaxResult uploadFile(MultipartFile file) throws Exception{try{//            // 上傳文件路徑
//            String filePath = RuoYiConfig.getUploadPath();
//            // 上傳并返回新文件名稱
//            String fileName = FileUploadUtils.upload(filePath, file);
//            String url = serverConfig.getUrl() + fileName;// 上傳文件，返回信息FileInfo fileInfo = fileStorageService.of(file).upload();String fileName = fileInfo.getFilename();AjaxResult ajax = AjaxResult.success();ajax.put("url", fileInfo.getUrl());ajax.put("fileName", fileName);ajax.put("newFileName", FileUtils.getName(fileName));ajax.put("originalFilename", file.getOriginalFilename());return ajax;}catch (Exception e){return AjaxResult.error(e.getMessage());}}/*** 通用上傳請求（多個）*/@PostMapping("/uploads")public AjaxResult uploadFiles(List<MultipartFile> files) throws Exception{try{// 上傳文件路徑String filePath = RuoYiConfig.getUploadPath();List<String> urls = new ArrayList<String>();List<String> fileNames = new ArrayList<String>();List<String> newFileNames = new ArrayList<String>();List<String> originalFilenames = new ArrayList<String>();for (MultipartFile file : files){// 上傳并返回新文件名稱String fileName = FileUploadUtils.upload(filePath, file);String url = serverConfig.getUrl() + fileName;urls.add(url);fileNames.add(fileName);newFileNames.add(FileUtils.getName(fileName));originalFilenames.add(file.getOriginalFilename());}AjaxResult ajax = AjaxResult.success();ajax.put("urls", StringUtils.join(urls, FILE_DELIMETER));ajax.put("fileNames", StringUtils.join(fileNames, FILE_DELIMETER));ajax.put("newFileNames", StringUtils.join(newFileNames, FILE_DELIMETER));ajax.put("originalFilenames", StringUtils.join(originalFilenames, FILE_DELIMETER));return ajax;}catch (Exception e){return AjaxResult.error(e.getMessage());}}/*** 本地資源通用下載*/@GetMapping("/download/resource")public void resourceDownload(String resource, HttpServletRequest request, HttpServletResponse response)throws Exception{try{if (!FileUtils.checkAllowDownload(resource)){throw new Exception(StringUtils.format("資源文件({})非法，不允許下載。 ", resource));}// 本地資源路徑String localPath = RuoYiConfig.getProfile();// 數據庫資源地址String downloadPath = localPath + StringUtils.substringAfter(resource, Constants.RESOURCE_PREFIX);// 下載名稱String downloadName = StringUtils.substringAfterLast(downloadPath, "/");response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE);FileUtils.setAttachmentResponseHeader(response, downloadName);FileUtils.writeBytes(downloadPath, response.getOutputStream());}catch (Exception e){log.error("下載文件失敗", e);}}
}

五、前端改造

1.改造 ImagePreview 組件

/src/components/ImagePreview/index.vue

改造?realSrc 的計算屬性

const realSrc = computed(() => {if (!props.src) {return;}let real_src = props.src.split(",")[0];if (isExternal(real_src)) {return real_src;}if(real_src.includes("http")){return real_src;}return import.meta.env.VITE_APP_BASE_API + real_src;
});

2. 改造ImageUpload 組件

/src/components/ImageUpload/index.vue

修改監聽器

watch(() => props.modelValue, val => {if (val) {// 首先將值轉為數組const list = Array.isArray(val) ? val : props.modelValue.split(",");// 然后將數組轉為對象數組fileList.value = list.map(item => {if (typeof item === "string") {if(item.includes('http')){item = { name: item, url: item };return item}if (item.indexOf(baseUrl) === -1) {item = { name: baseUrl + item, url: baseUrl + item };} else {item = { name: item, url: item };}}return item;});} else {fileList.value = [];return [];}
},{ deep: true, immediate: true });

最后整個整個項目的改造接入就完成啦