锐客网

  1. 首页 > it技术 > >

简单的整合阿里云OSS对象存储上传图片的功能

1.案例演示 (1).制作一个简单的表单，点击上传
简单的整合阿里云OSS对象存储上传图片的功能
文章图片
（2).oss管理控制台会存储当前照片信息


简单的整合阿里云OSS对象存储上传图片的功能
文章图片


简单的整合阿里云OSS对象存储上传图片的功能
文章图片
(3).跳转页面会显示图片
简单的整合阿里云OSS对象存储上传图片的功能
文章图片


2.设计步骤 首先先简单的设计两个数据库来存储表单信息


简单的整合阿里云OSS对象存储上传图片的功能
文章图片
设计前台页面，这里我主要使element-ui来设计页面，这里我直接在html页面引入element-ui相关文件，便于设计
我的目录结构


简单的整合阿里云OSS对象存储上传图片的功能
文章图片
导入相关依赖


com.aliyun.oss
aliyun-sdk-oss
3.8.1

相关配置
#阿里云OSS
#不同的服务器，地址不同
aliyun.oss.file.endpoint=oss-cn-beijing.aliyuncs.com
aliyun.oss.file.keyid=LTAI4G3DxLCmrmF2pD8PHc84
aliyun.oss.file.keysecret=WraTKDlqJFL4vaI0UCWsnZZp7R0Wka
#bucket可以在控制台创建，也可以使用java代码创建
aliyun.oss.file.bucketname=edu-day01
相关类
@Component
public class ConstantPropertiesUtilsimplements InitializingBean {
//取得配置文件内容
@Value("${aliyun.oss.file.endpoint}")
private Stringendpoint;
@Value("${aliyun.oss.file.keyid}")
private StringkeyId;
@Value("${aliyun.oss.file.keysecret}")
private StringkeySecret;
@Value("${aliyun.oss.file.bucketname}")
private StringbucketName;
//定义公开静态常量
public static StringEND_POIND;
public static StringACCESS_KEY_ID;
public static StringACCESS_KEY_SECRET;
public static StringBUCKET_NAME;
@Override
public void afterPropertiesSet()throws Exception {
END_POIND =endpoint;
ACCESS_KEY_ID =keyId;
ACCESS_KEY_SECRET =keySecret;
BUCKET_NAME =bucketName;
}
}
@Service
public class OssServiceImplimplements OssService {
//上传头像到oss
@Override
public String uploadFileAvatar(MultipartFile file) {
// 工具类获取值
String endpoint = ConstantPropertiesUtils.END_POIND;
String accessKeyId = ConstantPropertiesUtils.ACCESS_KEY_ID;
String accessKeySecret = ConstantPropertiesUtils.ACCESS_KEY_SECRET;
String bucketName = ConstantPropertiesUtils.BUCKET_NAME;
try {
// 创建OSS实例。
OSS ossClient =new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
//获取上传文件输入流
InputStream inputStream = file.getInputStream();
//获取文件名称
String fileName = file.getOriginalFilename();
//1 在文件名称里面添加随机唯一的值
String uuid = UUID.randomUUID().toString().replaceAll("-","");
// yuy76t5rew01.jpg
fileName = uuid+fileName;
//2 把文件按照日期进行分类
//获取当前日期
//2019/11/12
String datePath =new DateTime().toString("yyyy/MM/dd");
//拼接
//2019/11/12/ewtqr313401.jpg
fileName = datePath+"/"+fileName;
//调用oss方法实现上传
//第一个参数Bucket名称
//第二个参数上传到oss文件路径和文件名称aa/bb/1.jpg
//第三个参数上传文件输入流
//设置请求头
ObjectMetadata meta =new ObjectMetadata();
meta.setContentType("image/jpg");
ossClient.putObject(bucketName,fileName , inputStream,meta);
// 关闭OSSClient。
ossClient.shutdown();
//把上传之后文件路径返回
//需要把上传到阿里云oss路径手动拼接出来
//https://edu-guli-1010.oss-cn-beijing.aliyuncs.com/01.jpg
String url ="https://"+bucketName+"."+endpoint+"/"+fileName;
return url;
}catch(Exception e) {
e.printStackTrace();
return null;
}
}
}
页面代码 上传图片
























:multiple="multiple"
action="http://localhost:8009/img"
list-type="picture"
:auto-upload="false"
:http-request="uploadFile"
ref="upload"
>
点击上传


提交







显示页面代码

{{tableData.username}}
【简单的整合阿里云OSS对象存储上传图片的功能】{{tableData.username}}










查看数据库 存贮图片的路径地址
简单的整合阿里云OSS对象存储上传图片的功能
文章图片

    推荐阅读


    上一篇：卜算子·立秋二首

    下一篇：从悔恨中惊醒，面对未来，春暖花开