1.案例演示

(1).制作一个简单的表单，点击上传

（2).oss管理控制台会存储当前照片信息

(3).跳转页面会显示图片

2.设计步骤

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

设计前台页面，这里我主要使element-ui来设计页面，这里我直接在html页面引入element-ui相关文件，便于设计

我的目录结构

导入相关依赖

com.aliyun.oss

aliyun-sdk-oss

3.8.1

相关类

@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}}

{{tableData.username}}

查看数据库

存贮图片的路径地址

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

1.案例演示

2.设计步骤

页面代码

{{tableData.username}}

查看数据库

你可能感兴趣的:(简单的整合阿里云OSS对象存储上传图片的功能)