minio图片上传
minio1 安装(docker安装)2 创建桶3 java操作minio1 导包1 安装(docker安装)创建账号为root ,密码为123456789 (密码最好不要改动)目录映射地址为 /mnt/config:/root/.minio 和/mnt/data:/datadocker run -d -p 9000:9000 --name su-minio-e "MINIO_ACCESS_KEY
minio
2 docker安装minio
1 安装
创建账号为root ,密码为123456789 (密码最好不要改动)目录映射地址为 /mnt/config:/root/.minio
和 /mnt/data:/data
docker run -d -p 9000:9000 --name su-minio -e "MINIO_ACCESS_KEY=root" -e "MINIO_SECRET_KEY=123456789" -v /mnt/data:/data -v /mnt/config:/root/.minio minio/minio server /data
2 创建桶
按自己ip地址修改就行(本人访问地址如下)
http://192.168.19.132:9000/minio
进入界面后创建好一个桶 (此处创建的桶为images)
3 设置读写权限
选择 Read and Write然后再 点击添加即可
4 minio中图片查看方式
3 Vue上传图片至后端
1 图片上传标签
:auto-upload="false"
不进行自动上传,只有点击保存后才能上传
绑定:on-change="filechange"
事件 触发上传方法
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:show-file-list="false"
:auto-upload="false"
:on-change="filechange">
<img v-if="src" :src="src" width="80" height="80" />
<i v-else style="font-size: 30px;" class="el-icon-picture-outline"></i>
</el-upload>
4 Vue加载图片
1 在main.js中定义全局函数getImg(给出图片名就能返回图片的访问地址)
Vue.prototype.getImg = (path) => {
return 'http://192.168.19.132:9000/images/' + path
}
2 显示图片标签
<div slot="header" class="clearfix">
<img :src = "getImg(item.icon)" width="40" height="40" style="border-radius: 20px; float: right;margin-right: 20px; margin-top:-6px ;" >
</div>
4 java接收请求然后将图片上传至minio
注意是没有/minio
这一级目录的,ip和端口按自己的填
http://192.168.19.132:9000/
+ 桶名 + 图片名
示例:http://192.168.19.132:9000/images/202105111755070801gwcA.jpg
1 导包
<!-- https://mvnrepository.com/artifact/io.minio/minio -->
<dependency>
<groupId>io.minio</groupId>
<artifactId>minio</artifactId>
<version>7.1.2</version>
</dependency>
2 两张表
用户表中存放者图片名(即 http://192.168.19.132:9000/
+ 桶名
+ 图片名
)可以访问导头像的图片
图片表根据 md5
图片大小
后缀名
来判断上传的图片是否重复
1 用户表
CREATE TABLE `ums_user` (
`id` bigint(20) NOT NULL AUTO_INCREMENT,
`login_name` varchar(20) NOT NULL COMMENT '登入名',
`password` varchar(100) NOT NULL COMMENT '密码',
`email` varchar(50) NOT NULL COMMENT '邮箱',
`phone` varchar(20) NOT NULL COMMENT '手机号',
`name` varchar(20) NOT NULL COMMENT '姓名',
`icon` varchar(255) NOT NULL COMMENT '头像路径',
`active` tinyint(1) NOT NULL COMMENT '是否有效',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=130 DEFAULT CHARSET=utf8 COMMENT='用户表';
1 图片表
create table img(
id BIGINT PRIMARY key auto_increment,
md5 VARCHAR(255) not null comment '文件md5码',
size BIGINT not null comment '文件大小',
suffix VARCHAR(10) not null comment '后缀名',
url varchar(50) not null comment '在服务器中的地址'
) ENGINE=INNODB DEFAULT charset=utf8;
2 实现方法
1 前端携带图片访问 /update
- 第一步进入 MinioUtils 中进行图片是否上传过的判断,如果是新图片就上传导minio服务器然后返回文件名,反之直接返回文件名。
- 然后将文件名保存到用户表的
Icon
属性中,进行保存。
@Resource
private MinioUtils minioUtils;
@PostMapping("/update")
ResultJson update(UmsUser umsUser, MultipartFile file) throws IOException, InvalidKeyException, InvalidResponseException, InsufficientDataException, NoSuchAlgorithmException, ServerException, InternalException, XmlParserException, InvalidBucketNameException, ErrorResponseException {
// 有图片时才进行图片的上传工作
if(file != null && file.getSize() > 0) {
umsUser.setIcon(minioUtils.upload(file));
}
return ResultJson.success(iUmsUserService.updateById(umsUser), "修改用户成功");
}
2 到达MinioUtils
工具类
1.工具类中用 @Value("${minio.host}")
private String host; 这样的方式读取配置文件中的自定义属性
minio:
host: http://192.168.19.132:9000/
username: root
password: 123456789
1.工具类的作用包括:
根据 md5 size suffix 查询数据库表 img 判断文件是否已经上传过
给上传的文件进行重命名,防止出现重名覆盖minio服务器中原有的图片(采用系统时间 + 随机4个字符的方法)
package com.wy.config;
import com.wy.pojo.Img;
import com.wy.service.IImgService;
import io.minio.MinioClient;
import io.minio.PutObjectArgs;
import io.minio.errors.*;
import org.apache.commons.codec.digest.DigestUtils;
import org.apache.commons.io.FilenameUtils;
import org.apache.commons.lang.RandomStringUtils;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.multipart.MultipartFile;
import javax.annotation.Resource;
import java.io.IOException;
import java.security.InvalidKeyException;
import java.security.NoSuchAlgorithmException;
import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;
/**
* @program: MinioUtils
* @Description: TODO
* @Author: sucre1136@gmail.com
*/
@Configuration
public class MinioUtils {
// 主机地址和端口号
@Value("${minio.host}")
private String host;
// minio的用户名
@Value("${minio.username}")
private String username;
// minio的密码
@Value("${minio.password}")
private String password;
@Resource
IImgService iImgService;
public String upload(MultipartFile file) throws IOException, InvalidKeyException, InvalidResponseException, InsufficientDataException, NoSuchAlgorithmException, ServerException, InternalException, XmlParserException, InvalidBucketNameException, ErrorResponseException {
// 文件的md5 size suffix 三者结合可以用于区分不同的文件
// 可以用来
String md5 = DigestUtils.md5Hex(file.getInputStream());
long size = file.getSize();
String suffix = FilenameUtils.getExtension(file.getOriginalFilename());
// 先检测该文件是否上传过
Img img = iImgService.getImg(md5, size, suffix);
if(img!=null){
return img.getUrl();
}
// 创建新文件名 系统时间+4个随机字符 防止出现重名覆盖现象
// 创建的文件名就是 img 的url
StringBuilder newName = new StringBuilder();
newName.append(LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyyMMddHHmmssSSSS")))
.append(RandomStringUtils.random(4, true, true))
.append(".")
.append(suffix);
// minio操作
// 创建连接的ip 端口 账号密码
MinioClient minioClient = MinioClient.builder()
.endpoint(host)
.credentials(username, password)
.build();
//bucket 为在minio管理界面创建的桶的名称
PutObjectArgs bucket = PutObjectArgs.builder()
.contentType(file.getContentType())
.stream(file.getInputStream(), file.getSize(), 0)
.bucket("images")
.object(newName.toString())
.build();
minioClient.putObject(bucket);
Img img1 = new Img(
md5,
size,
suffix,
newName.toString()
);
iImgService.save(img1);
return newName.toString();
}
}
3 查询数据库表img
判断是否重名
md5 size suffix 三者有一个相同就不是相同的图片
@Override
public Img getImg(String md5, long size, String suffix) {
QueryWrapper<Img> imgQueryWrapper = new QueryWrapper<>();
imgQueryWrapper.eq("md5", md5)
.eq("size", size)
.eq("suffix", suffix);
return this.getOne(imgQueryWrapper);
}
更多推荐
所有评论(0)