OSS配置
首先去阿里云官网,开通并配置OSS服务
进入对象存储OSS,创建一个Bucket(记录下Endpoint,后端配置连接OSS时会使用到)
在新创建的Bucket中测试上传文件是否可用
前往阿里云的访问控制新建一个子用户
注意:
子用户创建成功切记复制AccessKey ID 与 AccessKey Secret
并保存起来,否则退出后无法再获取到这些信息。只能重新创建新的子用户。
扫描二维码关注公众号,回复:
14736209 查看本文章
创建完成后,为该子用户添加权限
到这一步,OSS服务就算开通完毕了。
后端配置
接下来是java的后端的配置以及与OSS服务器的连接了。
pom.xml添加以下依赖
<aliyun.oss.version>3.8.0</aliyun.oss.version>
<jodatime.version>2.10.1</jodatime.version>
<!--日期时间工具-->
<dependency>
<groupId>joda-time</groupId>
<artifactId>joda-time</artifactId>
<version>${jodatime.version}</version>
</dependency>
<!--aliyunOSS-->
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>${aliyun.oss.version}</version>
</dependency>
在配置文件application.yaml中配置OSS属性
config:
oss:
endpoint: oss-cn-hangzhou.aliyuncs.com
keyid: 存放前面创建子用户的参数AccessKey ID
keysecret: 存放前面创建子用户的参数AccessKey Secret
#bucket可以在控制台创建,也可以使用java代码创建
bucketname: 存放所创建的Bucket名称
接下来创建配置类
@Data
@Component
@ConfigurationProperties(prefix="config.oss")
publicclassOssConfig {
privateStringendpoint;
privateStringkeyid;
privateStringkeysecret;
privateStringbucketname;
}
添加service的实现类
@Service
publicclassFileServiceImpl{
@Autowired
privateOssConfigossConfig;
publicStringupload(InputStreaminputStream, Stringmodule, StringoriginalFilename) {
// 获得oss 服务器的信息
Stringendpoint=ossConfig.getEndpoint();
Stringkeyid=ossConfig.getKeyid();
Stringkeysecret=ossConfig.getKeysecret();
Stringbucketname=ossConfig.getBucketname();
//判断oss实例是否存在:如果不存在则创建,如果存在则获取
OSSossClient=newOSSClientBuilder().build(endpoint, keyid, keysecret);
if (!ossClient.doesBucketExist(bucketname)) {
//创建bucket
ossClient.createBucket(bucketname);
//设置oss实例的访问权限:公共读
ossClient.setBucketAcl(bucketname, CannedAccessControlList.PublicRead);
}
//构建日期路径:avatar/2020/08/11/文件名
Stringfolder=newDateTime().toString("yyyy/MM/dd");
//文件名:uuid.扩展名
StringfileName=UUID.randomUUID().toString();
StringfileExtension=originalFilename.substring(originalFilename.lastIndexOf("."));
Stringkey=module+"/"+folder+"/"+fileName+fileExtension;
//文件上传至阿里云
ossClient.putObject(ossConfig.getBucketname(), key, inputStream);
// 关闭OSSClient。
ossClient.shutdown();
//返回url地址
return"https://"+bucketname+"."+endpoint+"/"+key;
}
}
最后进行测试
@ApiOperation("文件上传")
@PostMapping("/upload")
publicRupload(
@ApiParam(value="文件", required=true)
@RequestParam("file") MultipartFilefile,
@ApiParam(value="模块", required=true)
@RequestParam("module") Stringmodule) throwsIOException {
// 获得上传文件的 InputStream
InputStreaminputStream=file.getInputStream();
// 获得上传文件的名字
StringoriginalFilename=file.getOriginalFilename();
StringuploadUrl=fileService.upload(inputStream, module, originalFilename);
//返回r对象
returnnewR(ResponseEnum.SUCCESS,uploadUrl);
}
在swagger上进行测试
到这里后端测试完毕。
前端配置
前端采用vue实现
// 文件上传组件
// http://localhost:8100/upload?module=avatar 路径为后端上传文件的接口
<el-uploadclass="avatar-uploader"action="http://localhost:8100/upload?module=avatar"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<imgv-if="imageUrl"
:src="imageUrl"
class="avatar">
<iv-else
class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
// method中的方法
// 上传成功后
handleAvatarSuccess (res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
// 可能URL.createObjectURL(file.raw);会出现路径错误
// 可以替换为:this.imageUrl = res.data;
},
beforeAvatarUpload (file) {
const isJPG = file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 <2;
if(!isJPG){
this.$message.error('上传头像图片只能是 png 格式!');
}
if(!isLt2M){
this.$message.error('上传头像图片大小不能超过 2MB!');
}
returnisJPG&&isLt2M;
},
到这里elementUI上传文件到OSS服务器就基本完成了。
记得点赞,收藏,关注!