SpringBoot实战电商项目商城（25k+star）地址：https://github.com/macrozheng/mall摘要上一节我们讲了使用MinIO搭建对象存储服务，这次我们讲关于它MinIO是如何结合SpringBoot和Vue来实现文件存储的。开学前准备学习这篇文章需要一些MinIO的基础知识。不知道的朋友可以参考：Githubstar19K+Star，10分钟自建对象存储服务！与SpringBoot结合使用接下来我们将结合SpringBoot来实现一个完整的图片上传删除操作。上传过程示意图：在pom.xml中添加MinIO相关依赖：io.miniominio3.0.10在SpringBoot中开启文件上传功能，需要在application.yml中添加如下配置：spring:servlet:multipart:enabled:true#开启文件上传max-file-size:10MB#限制文件上传大小为10M。添加一个MinioController控制器，实现文件上传和删除操作：/***macro于2019/12/25创建。*/@Api(tags="MinioController",description="MinIO对象存储管理")@Controller@RequestMapping("/minio")publicclassMinioController{privatestaticfinalLoggerLOGGER=LoggerFactory.getLogger(MinioController.class);@Value("${minio.endpoint}")私有字符串端点；@Value("${minio.bucketName}")privateStringBUCKET_NAME;@Value("${minio.accessKey}")私有字符串ACCESS_KEY；@Value("${minio.secretKey}")privateStringSECRET_KEY;@ApiOperation("文件上传")@RequestMapping(value="/upload",method=RequestMethod.POST)@ResponseBodypublicCommonResultupload(@RequestParam("file")MultipartFilefile){try{//创建一个MinIOJava客户端MinioClientminioClient=newMinioClient(ENDPOINT,ACCESS_KEY,SECRET_KEY);booleanisExist=minioClient.bucketExists(BUCKET_NAME);if(isExist){LOGGER.info("Thebucketalreadyexists!");}else{//创建一个bucket并设置只读权限minioClient.makeBucket(BUCKET_NAME);minioClient.setBucketPolicy(BUCKET_NAME,"*.*",PolicyType.READ_ONLY);}Stringfilename=file.getOriginalFilename();SimpleDateFormatsdf=newSimpleDateFormat("yyyyMMdd");//设置存储对象名称StringobjectName=sdf.format(newDate())+"/"+filename;//使用putObject上传一个文件到bucketminioClient.putObject(BUCKET_NAME,objectName,file.getInputStream(),file.getContentType());LOGGER.info("文件上传成功！");MinioUploadDtominioUploadDto=newMinioUploadDto();minioUploadDto.setName(文件名);minioUploadDto.setUrl(ENDPOINT+"/"+BUCKET_NAME+"/"+objectName);返回CommonResult.success(minioUploadDto);}catch(Exceptione){LOGGER.info("上传错误:{}!",e.getMessage());}返回CommonResult.failed();}@ApiOperation("文件删除")@RequestMapping(value="/delete",method=RequestMethod.POST)@ResponseBodypublicCommonResultdelete(@RequestParam("objectName")StringobjectName){try{MinioClientminioClient=newMinioClient(端点、ACCESS_KEY、SECRET_KEY）；minioObjectClient。(BUCKET_NAME,objectName);返回CommonResult.success(null);}catch(Exceptione){e.printStackTrace();}返回CommonResult.failed();在application.yml中配置MinIO客户端：#MinIO对象存储相关配置minio:endpoint:http://192.168.6.132:9090#MinIO服务地址bucketName:mall#存储桶名accessKey:minioadmin#访问密钥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前端无法进行接口调用，我们先添加全局跨域请求配置：/***全局跨域配置*2019/7宏创建/27。*/@ConfigurationpublicclassGlobalCorsConfig{/***允许跨域调用的过滤器*/@BeanpublicCorsFiltercorsFilter(){CorsConfigurationconfig=newCorsConfiguration();//允许所有域名跨域调用config.addAllowedOrigin("*");//允许跨域发送cookiesconfig.setAllowCredentials(true);//允许所有原始头信息config.addAllowedHeader("*");//允许所有请求方法跨域调用config.addAllowedMethod("*");UrlBasedCorsConfigurationSourcesource=newUrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**",配置);返回新的CorsFilter（来源）；}}mall-admin-web的文件上传操作主要在singleUpload.vue和multiUpload.vue中，我们以修改singleUpload.vue为例。我们需要让原来的OSS上传兼容现在的MinIO上传，首先在Vue实例的data对象中添加三个属性：然后根据useOss属性设置el-upload上传组件的提交地址和提交参数：在el-在上传文件前的钩子函数中添加如下代码。对于使用MinIO上传的操作，没有进行获取OSS上传策略的操作；最后在el-upload文件上传成功的钩子函数中添加如下代码。对于使用MinIO上传的操作，直接从返回结果中获取文件url；运行mall-admin-web项目，使用商品分类下的添加功能测试文件上传，发现可以上传成功，图片可以正常显示：后台项目地址https:///github.com/macrozheng...前端项目地址https://github.com/macrozheng...公众号商城项目全套学习教程正在连载中，第一时间关注公众号.
