VUE+OSS安全令牌实现图片前端直传

图片上传说明：        

        传统文件上传方式 fastdfs：分布式文件系统需要docker安装配置 适合大容量存储  

        云上传（3种）：对象存储：适用于文件、图片、视频等比较灵活具有高度可扩展性，元数据特性

                                   文件存储：基于文件的存储

                                   数据块存储：注意针对每个主机的专用低延迟存储

阿里云对象存储图片上传：

登录阿里云，进入OSS管理控制台，选择生成安全令牌

进入RAM控制台,授权生成安全令牌，保存好自己的AccessKeyId和Screct，否则需要你重新配置

授权完成记得开放对象存储的权限哦！

进入Bucket列表配置跨域设置：

 

根据自己的需求进行跨域配置：

获取自己的Bucket和Endpoint

后台代码管理：

根据需求创建安全令牌配置对象实体类：

@Data
public class Ossupload {
        private String accessId;//您的AccessKeyId
        private String accessKey;//您的AccessKeySecret
        private String endpoint;//您的endpoint
        private String bucket;//您的bucketName
        private String host;//host的格式为BucketName.endpoint
        private String dir;//上传文件时指定的前缀
        private String expire;//过期时间
        private String policy;//安全签名
        private String Signature;//签名信息
}

抒写一个前端获取安全令牌的接口：

/**
* 获取Oss访问token
* @return
*/
@GetMapping("/gettoken")
@CrossOrigin
public Ossupload getToken(){
        return iUserService.getToken2();
}

注意：此处的访问接口必须添加@CrossOrigin注解，否则无法跨域

实现类代码：

@Override
public Ossupload getToken2() {
log.info("OSS请求成功");
Ossupload ossupload = new Ossupload();
ossupload.setAccessId("");//请填写您的AccessKeyId
ossupload.setAccessKey("");// 请填写您的AccessKeySecret
ossupload.setEndpoint("");// 请填写您的 endpoint
ossupload.setBucket("");// 请填写您的 bucketname
ossupload.setHost("https://"+ossupload.getBucket()+"."+ossupload.getEndpoint()); // host的格式为 BucketName.endpoint
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
String date = simpleDateFormat.format(new Date());
ossupload.setDir( "chenshiyu"+date+"/");// 用户上传文件地址前缀
// 创建OSSClient实例
OSS ossClient = new OSSClientBuilder().build(ossupload.getEndpoint(),ossupload.getAccessId(),ossupload.getAccessKey());
try {
long expireTime = 30;
long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
Date expiration = new Date(expireEndTime);
// PostObject请求最大可支持的文件大小为5 GB，即CONTENT_LENGTH_RANGE为5*1024*1024*1024。
PolicyConditions policyConds = new PolicyConditions();
policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, ossupload.getDir());

String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
byte[] binaryData = postPolicy.getBytes("utf-8");
String encodedPolicy = BinaryUtil.toBase64String(binaryData);
String postSignature = ossClient.calculatePostSignature(postPolicy);
//阿里云oss前端直传必须参数
ossupload.setExpire(String.valueOf(expireEndTime / 1000));
ossupload.setPolicy(encodedPolicy);
ossupload.setSignature(postSignature);
return ossupload;
} catch (Exception e) {
// Assert.fail(e.getMessage());
System.out.println(e.getMessage());
} finally {
ossClient.shutdown();
}
return null;
}

前端代码：

图片上传方法：

<!-- 前端直传-->
<el-upload
:action="dataObj.host"
:data="dataObj"
list-type="picture-card"
:before-upload="beforeUpload"
:on-success="handleUploadSuccess"
>
<i class="el-icon-plus" />
</el-upload>

<img width="100%" :src="img" alt="" style="width: 150px;height:150px">

参数配置：

dataObj: {
OSSAccessKeyId: '',
policy: '',
Signature: '',
key: '',
host: '',
dir: ''
},
img: '',
img2: '',

实现方法：

// 前端直传 在图片上传前获取后端token签名
beforeUpload(file) {
return new Promise((resolve, reject) => {
// 请求后端（请求地址和后端访问地址一样）
axios
.get('http://127.0.0.1:18080/user/gettoken')
.then(response => {
console.log(response)
console.log(response.data.accessId)
// 获取前端参数
this.dataObj.OSSAccessKeyId = response.data.accessId
this.dataObj.policy = response.data.policy
this.dataObj.Signature = response.data.signature
this.dataObj.dir = response.data.dir
this.dataObj.host = response.data.host
// eslint-disable-next-line no-template-curly-in-string
this.dataObj.key = response.data.dir + '${filename}'
resolve(true) // 继续上传
})
.catch((error) => {
{
console.log(error)
// reject(false)
reject(new Error(false)) // 停止上传
}
})
})
},
// 回调方法
handleUploadSuccess(res, file) {
console.log('上传成功...')
console.log(file)
// 拼接回调地址给img变量赋值
this.img = this.dataObj.host + '/' + this.dataObj.key.replace('${filename}', file.name)
console.log(this.img)
}, // 如果页面有keep-alive缓存功能，这个函数会触发",

注意：前端这里使用的是axios发送请求，记得要引入axios的组件才可以

最后：本文的重点就是要把STS的参数配置好，实现前端在图片上传前请求后端获取token令牌进行验证，以此来实现文件安全上传。