【Vue+java+阿里云oss】服务端签名后文件直传及文件下载（私有bucket），详细步骤及前后端代码（一）
阿里云OSS控制台：创建私有bucket，创建子账户，添加权限AliyunOSSFullAccess，设置跨域服务端代码：导入依赖，获取policy接口代码前端代码： vue+element UI报错排坑：跨域错误，400错误
·
阿里云文档地址：https://help.aliyun.com/document_detail/31926.html
本文仅有服务端签名后直传。 私有bucket下，文件下载见下一篇博 https://ygstriver.blog.csdn.net/article/details/121657880。
1.阿里云OSS控制台
创建私有bucket
打开阿里云OSS控制台，创建bucket。（公共读写更简单，私有可以防止其他人获取你的文件，避免数据泄漏或者流量消耗）
创建子账户
进入RAM控制台，创建子用户。
勾选Open API调用访问
然后添加权限AliyunOSSFullAccess
开启跨域
在bucket页面，开启跨域！
2.服务端代码
导入依赖
<!-- 阿里云oss-->
<dependency>
<groupId>com.alibaba.cloud</groupId>
<artifactId>spring-cloud-starter-alicloud-oss</artifactId>
<version>2.2.0.RELEASE</version>
</dependency>
policy()接口
import com.aliyun.oss.OSS;
import com.aliyun.oss.common.utils.BinaryUtil;
import com.aliyun.oss.model.MatchMode;
import com.aliyun.oss.model.PolicyConditions;
import com.ruoyi.common.core.domain.AjaxResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.LinkedHashMap;
import java.util.Map;
@RestController //就是普通的Controller 再加 将响应体以json格式返回 即@ResponseBody
public class OssController {
@Autowired
OSS ossClient;
@Value("${spring.cloud.alicloud.oss.endpoint}") //@Value 在nacos之前获取，所有写配置中心的话这个不能注入
private String endpoint;
@Value("${spring.cloud.alicloud.oss.bucket}")
private String bucket;
@Value("${spring.cloud.alicloud.access-key}")
private String accessId;
@RequestMapping("/xxx/xxx")
public AjaxResult policy(){
String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint
// callbackUrl为上传回调服务器的URL，请将下面的IP和Port配置为您自己的真实信息。
// String callbackUrl = "http://88.88.88.88:8888";
String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
String dir = format + "/"; // 用户上传文件时指定的前缀。
Map<String, String> respMap = null;
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, dir);
String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
byte[] binaryData = postPolicy.getBytes("utf-8");
String encodedPolicy = BinaryUtil.toBase64String(binaryData);
String postSignature = ossClient.calculatePostSignature(postPolicy);
respMap = new LinkedHashMap<>();
respMap.put("accessid", accessId);
respMap.put("policy", encodedPolicy);
respMap.put("signature", postSignature);
respMap.put("dir", dir);
respMap.put("host", host);
respMap.put("expire", String.valueOf(expireEndTime / 1000));
// respMap.put("expire", formatISO8601Date(expiration));
} catch (Exception e) {
// Assert.fail(e.getMessage());
System.out.println(e.getMessage());
} finally {
ossClient.shutdown();
}
return AjaxResult.success().put("data",respMap);
}
}
AjaxResult是统一返回结构，也可以直接返回Map,反正你能得到这个就行了
3.前端代码：
采用vue框架
①上传表单，这里用了element UI 自行导入即可
<el-upload
ref="upload"
:limit="1"
:data="dataObj"
accept=".ppt, .pptx"
:action="upload.url"
:headers="upload.headers"
:file-list="upload.fileList"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
>
<el-button slot="trigger" size="small" type="primary" @click="beforeUpload"
>选取文件</el-button
>
<el-button
style="margin-left: 10px"
size="small"
type="success"
:loading="upload.isUploading"
@click="submitUpload"
>上传到服务器</el-button
>
<div slot="tip" class="el-upload__tip">
只能上传jpg/png文件，且不超过500kb
</div>
</el-upload>
② 数据参数
//签名参数
dataObj: {
policy: "",
signature: "",
key: "",
ossaccessKeyId: "",
dir: "",
host: "",
// callback:'',
},
// 上传参数
upload: {
// 是否禁用上传
isUploading: false,
//设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
//上传的地址
url: "你的Bucket 域名http://xxx.oss-cn-xxxx.aliyuncs.com/",
//上传的文件列表
fileList: [],
},
③请求方法
/**
* 图片上传前先获取policy
*/
beforeUpload(file) {
let _self = this;
//console.log("图片上传前先获取policy");
getPolicy().then((response) => {
//console.log("response:", response);
_self.dataObj.policy = response.data.policy;
_self.dataObj.signature = response.data.signature;
_self.dataObj.ossaccessKeyId = response.data.accessid;
_self.dataObj.key = response.data.dir + getUUID() + "_${filename}";
_self.dataObj.dir = response.data.dir;
_self.dataObj.host = response.data.host;
// console.log("响应的数据222。。。", _self.dataObj);
});
},
handleUpdate(row) {
this.upload.fileList = [
{ name: this.form.fileName, url: this.form.filePath },
];
},
// 文件提交处理
submitUpload() {
this.$refs.upload.submit();
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.isUploading = false;
this.form.filePath = response.url;
this.$modal.msgSuccess(response.msg);
},
以下方法写在单独的一个api.js中，引入即可
// 获取阿里云上传policy
export function getPolicy() {
return request({
url: '你的policy接口',
method: 'get',
})
}
/**
* 获取uuid
*/
export function getUUID () {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
})
}
报错排坑
1.上传阿里云oss，报跨域错误， 记得bucket开启跨域
2.报400错误，可以查看请求返回信息，可能是上传和获取policy时顺序不对，或者上传速度太快，policy的参数还没变就传上去了。
有其他问题，欢迎大家留言讨论。
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献2条内容
所有评论(0)