SpringBoot +Vue3 整合Minio 实现图片文件上传

一、前端,以下只是简单示范图片上传功能

1、vue文件

<style scoped>

</style>

<template>
    <el-upload
            class="upload-demo"
            multiple
            list-type="picture-card"
            :file-list="pictureList"
            accept=".png,.jpg"
            :before-upload="beforeUploadPicture"
    >
        <el-icon><Plus /></el-icon>
    </el-upload>
</template>

<script setup>
    import {ref,reactive} from 'vue';
    import {uploadImg} from '@/api/common'
    import {ElMessage} from 'element-plus'

    let pictureList=ref([]);
    const beforeUploadPicture=(file)=>{
        let fd=new FormData();
        fd.append('file',file);
        uploadImg(fd).then(res=>{
            if(!res.success){
                ElMessage.error(res.message);
                return;
            }
            pictureList.value.push({
                url:res.data.url,
                path:res.data.path
            });
        });
        return false;
    }
</script>

2、 uploadImg 文件


//图片上传接口
export function uploadImg(data) {
  return https({
    url: `/admin/common/uploadImg`,
    method: 'post',
    data
  })
}

二、后端

1、pom.xml 文件引入minio

<!--  minio上传文件  -->
<dependency>
    <groupId>io.minio</groupId>
    <artifactId>minio</artifactId>
    <version>8.4.3</version>
</dependency>

2、application.yml  配置

minio:
  endpoint: http://127.0.0.1:9000   #换成自己的minio服务端地址
  access-key: minioadmin            //minio登录用户名
  secret-key: minioadmin            //minio登录密码
  bucket-name: word                 //minio 桶名,根据自己业务取名

3、minio控制类

import io.minio.MinioClient;
import lombok.Data;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.stereotype.Component;

@Data
@Configuration
@Component
public class MinioConfig {

    @Value("${minio.endpoint}")
    private String endpoint;
    @Value("${minio.access-key}")
    private String accessKey;
    @Value("${minio.secret-key}")
    private String secretKey;

    @Bean
    public MinioClient minioClient(){
        return MinioClient.builder().endpoint(endpoint)
                .credentials(accessKey,secretKey).build();
    }

}

4、Minio 上传文件工具

import io.minio.MinioClient;
import io.minio.PutObjectArgs;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;

import java.io.InputStream;

@Component
@Slf4j
public class MinioUtils {

    /**
     * 文件上传
     * @param file
     * @return
     */
    public Boolean upload(MultipartFile file,String fileName,String bucketName) {
        try {
            InputStream inputStream = file.getInputStream();
            // 上传到minio服务器
            minioClient.putObject(PutObjectArgs.builder()
                    .bucket(bucketName)
                    .object(fileName)
                    .stream(inputStream, -1L, 10485760L)
                    .build());
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
        return true;
    }

    @Autowired
    private MinioClient minioClient;

}

5、公用上传文件接口,接口Result 返回结果是自定义的,可自行换成自己的项目返回结果集

import com.hzs.word.common.Result;
import com.hzs.word.enums.ResultCode;
import com.hzs.word.utils.MinioUtils;
import com.hzs.word.utils.UUIDUtils;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import javax.annotation.Resource;
import java.util.HashMap;

@RestController
@RequestMapping("admin/common")
public class CommonController {
    
    /**
     * 保存文件到第三方软件库
     * @param file
     * @return
     * @throws Exception
     */
    @PostMapping(value = "uploadImg")
    public Result uploadImg(@RequestParam("file") MultipartFile file){
        if (file.isEmpty()) {
            return Result.failure(ResultCode.FILE_FAILURE.getCode(), ResultCode.FILE_FAILURE.getMessage());
        }
        String originalFilename = file.getOriginalFilename();
        String sub = originalFilename.substring(originalFilename.lastIndexOf("."));
        // 改用uuid为图片名称
        String fileName =UUIDUtils.getId() + sub;
        //生成完整的文件存储路径
        HashMap<String, Object> resultMap = new HashMap<>();
        resultMap.put("path", "/goods/"+fileName);//相对地址
        Boolean upload = minioUtils.upload(file, "/goods/"+fileName,bucketName);
        if (upload){
            String url=endpoint+"/"+bucketName+"/"+"/goods/"+fileName;//绝对地址
            resultMap.put("url",url);//绝对地址
            return Result.success(resultMap) ;
        }else {
        return Result.failure(40400,"上传失败");
        }
    }
    
    @Value("${minio.endpoint}")
    private String endpoint;
    @Value("${minio.bucket-name}")
    public String bucketName;
    @Resource
    private MinioUtils minioUtils;
}

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值