先後端分離項目，如何優雅實現文件存儲！

SpringBoot實戰電商項目mall（25k+star）地址：github.com/macrozheng/…

摘要

在上一節中咱們講到了使用MinIO來自建對象存儲服務，此次咱們來說下MinIO如何結合SpringBoot和Vue來實現文件存儲。

學前準備

學習本文須要一些MinIO的基礎知識，還不瞭解的小夥伴能夠參考下：Github標星19K+Star，10分鐘自建對象存儲服務！

結合SpringBoot使用

接下來咱們將結合SpringBoot來實現一個完整的圖片上傳與刪除操做。

• 上傳流程示意圖：

• 在pom.xml中添加MinIO的相關依賴：

<!--MinIO JAVA SDK-->
<dependency>
    <groupId>io.minio</groupId>
    <artifactId>minio</artifactId>
    <version>3.0.10</version>
</dependency>
複製代碼

• 在SpringBoot中開啓文件上傳功能，須要在application.yml添加以下配置：

spring:
 servlet:
 multipart:
 enabled: true #開啓文件上傳
 max-file-size: 10MB #限制文件上傳大小爲10M
複製代碼

• 添加一個MinioController控制器用於實現文件的上傳和刪除操做：

/** * Created by macro on 2019/12/25. */
@Api(tags = "MinioController", description = "MinIO對象存儲管理")
@Controller
@RequestMapping("/minio")
public class MinioController {

    private static final Logger LOGGER = LoggerFactory.getLogger(MinioController.class);
    @Value("${minio.endpoint}")
    private String ENDPOINT;
    @Value("${minio.bucketName}")
    private String BUCKET_NAME;
    @Value("${minio.accessKey}")
    private String ACCESS_KEY;
    @Value("${minio.secretKey}")
    private String SECRET_KEY;

    @ApiOperation("文件上傳")
    @RequestMapping(value = "/upload", method = RequestMethod.POST)
    @ResponseBody
    public CommonResult upload(@RequestParam("file") MultipartFile file) {
        try {
            //建立一個MinIO的Java客戶端
            MinioClient minioClient = new MinioClient(ENDPOINT, ACCESS_KEY, SECRET_KEY);
            boolean isExist = minioClient.bucketExists(BUCKET_NAME);
            if (isExist) {
                LOGGER.info("存儲桶已經存在！");
            } else {
                //建立存儲桶並設置只讀權限
                minioClient.makeBucket(BUCKET_NAME);
                minioClient.setBucketPolicy(BUCKET_NAME, "*.*", PolicyType.READ_ONLY);
            }
            String filename = file.getOriginalFilename();
            SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
            // 設置存儲對象名稱
            String objectName = sdf.format(new Date()) + "/" + filename;
            // 使用putObject上傳一個文件到存儲桶中
            minioClient.putObject(BUCKET_NAME, objectName, file.getInputStream(), file.getContentType());
            LOGGER.info("文件上傳成功!");
            MinioUploadDto minioUploadDto = new MinioUploadDto();
            minioUploadDto.setName(filename);
            minioUploadDto.setUrl(ENDPOINT + "/" + BUCKET_NAME + "/" + objectName);
            return CommonResult.success(minioUploadDto);
        } catch (Exception e) {
            LOGGER.info("上傳發生錯誤: {}！", e.getMessage());
        }
        return CommonResult.failed();
    }

    @ApiOperation("文件刪除")
    @RequestMapping(value = "/delete", method = RequestMethod.POST)
    @ResponseBody
    public CommonResult delete(@RequestParam("objectName") String objectName) {
        try {
            MinioClient minioClient = new MinioClient(ENDPOINT, ACCESS_KEY, SECRET_KEY);
            minioClient.removeObject(BUCKET_NAME, objectName);
            return CommonResult.success(null);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return CommonResult.failed();
    }
}
複製代碼

• 在application.yml中對MinIO客戶端進行配置：

# MinIO對象存儲相關配置
minio:
 endpoint: http://192.168.6.132:9090 #MinIO服務所在地址
 bucketName: mall #存儲桶名稱
 accessKey: minioadmin #訪問的key
 secretKey: minioadmin #訪問的祕鑰
複製代碼

• 啓動個人SpringBoot應用，使用Postman來訪問上傳接口進行文件上傳，上傳接口地址：http://localhost:8080/minio/upload

• 上傳完成後，咱們打開MinIO的管理界面能夠看到上傳後的圖片，也能夠經過返回的url來訪問圖片：

• 咱們能夠調用刪除接口來刪除該圖片，須要注意的是objectName值是存儲桶中的圖片相對路徑，刪除文件接口地址：http://localhost:8080/minio/delete

結合Vue使用

通過上面操做，咱們的SpringBoot應用已經能夠完成文件上傳與刪除操做了，接下來咱們結合Vue來實現前端上傳圖片到MinIO中，以mall-admin-web中的代碼爲例。

• 咱們的SpringBoot應用須要支持跨域請求，不然Vue前端沒法進行接口調用，咱們先添加一個全局的跨域請求配置：

/** * 全局跨域配置 * Created by macro on 2019/7/27. */
@Configuration
public class GlobalCorsConfig {

    /** * 容許跨域調用的過濾器 */
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        //容許全部域名進行跨域調用
        config.addAllowedOrigin("*");
        //容許跨愈加送cookie
        config.setAllowCredentials(true);
        //放行所有原始頭信息
        config.addAllowedHeader("*");
        //容許全部請求方法跨域調用
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}
複製代碼

• mall-admin-web的文件上傳操做主要是在singleUpload.vue和multiUpload.vue中，下面咱們以singleUpload.vue的修改成例。

• 咱們須要把原來的OSS上傳和如今的MinIO上傳作個兼容操做，先在Vue實例的數據對象中添加三個屬性：

• 而後根據useOss屬性設置el-upload上傳組件的提交地址和提交參數：

• 在el-upload上傳文件以前的鉤子函數中添加以下代碼，對於使用MinIO上傳的操做不進行獲取OSS上傳策略的操做；

• 最後在el-upload文件上傳成功的鉤子函數中添加以下代碼，對於使用MinIO上傳的操做直接從返回結果中獲取文件url；

• 運行mall-admin-web項目，使用商品分類下的添加功能來測試下文件上傳，發現已經能夠成功上傳，圖片也已經能夠正常回顯：

後端項目地址

github.com/macrozheng/…

前端項目地址

github.com/macrozheng/…

公衆號

mall項目全套學習教程連載中，關注公衆號第一時間獲取。