Разделение front-end и back-end проектов, как элегантно реализовать файловое хранилище!

Java
Разделение front-end и back-end проектов, как элегантно реализовать файловое хранилище!

Адрес фактического центра электронной коммерции SpringBoot (25k+star):GitHub.com/macro-positive/…

Резюме

В предыдущем разделе мы говорили об использовании MinIO для создания сервисов хранения объектов, на этот раз мы поговорим о том, как MinIO объединяет SpringBoot и Vue для реализации хранилища файлов.

дошкольная подготовка

Изучение этой статьи требует некоторых базовых знаний о MinIO.Для тех, кто еще не знает этого, вы можете обратиться к следующему:Github star 19K+Star, 10-минутный сервис для хранения объектов!

Использовать с SpringBoot

Далее мы объединим SpringBoot для реализации полной операции загрузки и удаления образа.

  • Схематическая диаграмма процесса загрузки:

  • Добавьте зависимости, связанные с MinIO, в pom.xml:
<!--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();
    }
}
  • Настройте клиент MinIO в application.yml:
# 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Следующий код добавляется в функцию-ловушку для успешной загрузки файла, а URL-адрес файла получается непосредственно из возвращаемого результата операции загрузки с использованием MinIO;

  • бегатьmall-admin-webProject, используйте функцию добавления в категории продукта, чтобы протестировать загрузку файла и убедиться, что он был успешно загружен, и изображение может отображаться нормально:

Адрес бэкэнд-проекта

GitHub.com/macro-positive/…

Адрес фронтенд проекта

GitHub.com/macro-positive/…

публика

проект торгового центраПолный набор учебных пособий сериализуется,Обратите внимание на публичный аккаунтПолучите это прямо сейчас.

公众号图片

Категории