一、前端,以下只是简单示范图片上传功能
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;
}