vue
<template>
<el-upload
class="upload-demo"
:action="objectData.host"
:before-upload="beforeUpload"
accept=""
:multiple="false"
:on-exceed="handleExceed"
:on-success="handleSuccess"
:file-list="fileList"
:on-error="handleError"
:data="objectData"
:show-file-list="false">
<el-button size="small" type="primary">點擊上傳</el-button>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: [],
objectData: {
OSSAccessKeyId: '',
policy: '',
Signature: '',
callback: '',
key: '',
host: '',
dir: ''
},
};
},
methods: {
beforeUpload(file) {
const extensionLimits = {
video: {extensions: ["mp4", "flv"], maxSize: 300},
documents: {
extensions: ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "pdf", "rar", "zip"],
maxSize: 30
},
images: {extensions: ["jpg", "png", "gif", "jpeg"], maxSize: 30},
audio: {extensions: ["mp3"], maxSize: 30},
};
const ext = file.name.split(".").pop();
const fileSize = file.size / 1024 / 1024;
const showError = (errorMessage) => {
this.$message.error(errorMessage);
return false;
};
if (ext === "mp4" || ext === "flv") {
if (fileSize > extensionLimits.video.maxSize) {
return showError("文件大小不能超過300MB!");
}
} else if (extensionLimits.documents.extensions.includes(ext)) {
if (fileSize > extensionLimits.documents.maxSize) {
return showError("文件大小不能超過30MB!");
}
} else if (extensionLimits.images.extensions.includes(ext)) {
if (fileSize > extensionLimits.images.maxSize) {
return showError("文件大小不能超過30MB!");
}
} else if (extensionLimits.audio.extensions.includes(ext)) {
if (fileSize > extensionLimits.audio.maxSize) {
return showError("文件大小不能超過30MB!");
}
} else {
return showError("上傳文件只能是 doc、docx、xls、xlsx、ppt、pptx、pdf、rar、zip、jpg、png、gif、jpeg、mp4、flv、mp3 格式!");
}
this.FormLoading = true;
let that = this
//獲取oss上傳令牌
return new Promise((resolve, reject) => {
axios.get(JavaApiM + '/gt-web/resources/getSTSToken').then(res => {
const fileData = res.data.data
that.objectData.OSSAccessKeyId = fileData.accessId;
that.objectData.policy = fileData.policy;
that.objectData.Signature = fileData.signature;
that.objectData.callback = fileData.callback;
that.objectData.dir = fileData.dir;
that.objectData.host = fileData.host;
that.objectData.key = fileData.dir + '${filename}';
resolve(true);
console.log(fileData.domain + "/" + that.objectData.dir + file.name)
})
.catch(res => {
reject(false)
console.log(res);
})
})
},
handleExceed(files, fileList) {
this.$message.warning(`當前限制選擇 1 個文件，本次選擇了 ${files.length} 個文件，共選擇了 ${files.length + fileList.length} 個文件`);
},
handleSuccess(file) {
let result = file.data;
console.log(file);
let info = {
Ext: "." + result.path.split(".").pop(),
Path: result.path,
StatusCode: 1,
fileSys: 2,
name: result.path.split("/").pop()
}
console.log(info)
this.fileList.push(info);
this.FormLoading = false;
},
handleError(res, file) {
this.FormLoading = false;
this.$message.error('上傳失敗')
},
}
};
</script>
<style>
</style>
java
/**
* 調(diào)用OSS接口獲取STS臨時訪問憑證
*
* @return {@link ApiRest }
* @author liuyanqiang
* @since 2023/06/28 10:08
**/
@ApiOperation(value = "調(diào)用OSS接口獲取STS臨時訪問憑證", notes = "調(diào)用OSS接口獲取STS臨時訪問憑證")
@RequestMapping(value = "/getSTSToken", method = RequestMethod.GET)
public ApiRest getSTSToken() {
return super.success(resourcesService.getSTSToken());
}
/**
* 回調(diào)
*
* @param request 請求
* @return {@link ApiRest }
* @author liuyanqiang
* @since 2023/07/03 10:46
**/
@ApiOperation(value = "調(diào)用OSS接口上傳的回調(diào)函數(shù)", notes = "調(diào)用OSS接口上傳的回調(diào)函數(shù)")
@RequestMapping(value = "/callback", method = RequestMethod.POST)
public ApiRest callback(HttpServletRequest request) {
return super.success(resourcesService.callback(request));
} /**
* 調(diào)用OSS接口獲取STS臨時訪問憑證
*
* @return {@link Map }<{@link String },{@link String }>
* @author liuyanqiang
* @since 2023/06/28 02:16
**/
Map<String,String> getSTSToken();
/**
* 回調(diào)
*
* @param request 請求
* @return {@link Map }<{@link String },{@link String }>
* @author liuyanqiang
* @since 2023/07/06 02:55
**/
Map<String,String> callback(HttpServletRequest request); @Value("${aliCloud.oss.access-key}")
private String ACCESS_KEY;
@Value("${aliCloud.oss.secret-key}")
private String SECRET_KEY;
@Value("${aliCloud.oss.bucket}")
private String BUCKET;
@Value("${aliCloud.oss.endpoint}")
private String ENDPOINT;
@Value("${aliCloud.oss.custom-domain}")
private String CUSTOM_DOMAIN;
@Value("${aliCloud.oss.file-dir}")
private String FILE_DIR;
@Value("${aliCloud.oss.callback-url}")
private String CALLBACK_URL;
/**
* 調(diào)用OSS接口獲取STS臨時訪問憑證
*
* @return {@link Map }<{@link String }, {@link String }>
* @author liuyanqiang
* @since 2023/06/28 02:16
**/
@Override
public Map<String, String> getSTSToken() {
return ossUtil.getSTSToken(CUSTOM_DOMAIN,BUCKET, ENDPOINT, ACCESS_KEY, SECRET_KEY,FILE_DIR,CALLBACK_URL);
}
/**
* 回調(diào)
*
* @param request 請求
* @return {@link Map }<{@link String }, {@link String }>
* @author liuyanqiang
* @since 2023/07/03 10:46
**/
@Override
public Map<String, String> callback(HttpServletRequest request) {
Map<String, String> respMap = new HashMap<>();
String filename = request.getParameter("filename");
String path = "https://".concat(CUSTOM_DOMAIN).concat("/").concat(filename);
respMap.put("path", path);
respMap.put("size", request.getParameter("size"));
respMap.put("mimeType", request.getParameter("mimeType"));
respMap.put("height", request.getParameter("height"));
respMap.put("width", request.getParameter("width"));
return respMap;
}
/**
* 阿里云 oss 上傳工具類
*
* @author liuyanqiang
* @version 1.0.0
* @since 2023/04/19 06:36
**/
@Slf4j
@Data
@Component
public class OSSUtil {
/**
* oss 工具客戶端
*/
private static OSSClient ossClient = null;
/**
* 獲取STS臨時訪問憑證
*
* @param customDomain 自定義域
* @param bucketName bucket名稱
* @param endPoint 終點
* @param accessKeyId 訪問密鑰id
* @param accessKeySecret 訪問密鑰秘密
* @param fileDir 文件dir
* @param callbackUrl 回調(diào)url
* @return {@link Map }<{@link String }, {@link String }>
* @author liuyanqiang
* @since 2023/07/03 10:45
**/
public static Map<String, String> getSTSToken(String customDomain,String bucketName, String endPoint, String accessKeyId, String accessKeySecret, String fileDir,String callbackUrl) {
// 初始化oss
initOSS(bucketName, endPoint, accessKeyId, accessKeySecret);
Map<String, String> respMap = Maps.newHashMap();
try {
// 拼接文件路徑
fileDir = fileDir + DateUtil.format(new Date(), "yyyyMMdd") + "/" + System.currentTimeMillis()+"/";
// 獲取臨時訪問憑證
long expireTime = 30;
long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
Date expiration = new Date(expireEndTime);
PolicyConditions policyConds = new PolicyConditions();
policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, fileDir);
String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
byte[] binaryData = postPolicy.getBytes("utf-8");
String policy = BinaryUtil.toBase64String(binaryData);
String signature = ossClient.calculatePostSignature(postPolicy);
// 設置回調(diào)參數(shù)
JSONObject jasonCallback = new JSONObject();
jasonCallback.put("callbackUrl", callbackUrl);
jasonCallback.put("callbackBody",
"filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}");
jasonCallback.put("callbackBodyType", "application/x-www-form-urlencoded");
String callbackData = BinaryUtil.toBase64String(jasonCallback.toString().getBytes());
respMap.put("callback", callbackData);
respMap.put("accessId",accessKeyId);
respMap.put("policy",policy);
respMap.put("signature",signature);
respMap.put("dir",fileDir);
respMap.put("host","https://" + bucketName + "." + endPoint);
respMap.put("expire",String.valueOf(expireEndTime / 1000));
respMap.put("domain","https://" + customDomain);
log.info("獲取臨時訪問憑證成功",respMap);
return respMap;
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
} catch (ClientException e) {
e.printStackTrace();
}
return respMap;
}
/**
* 上傳文件至阿里云 OSS
*
* @param file 待上傳文件
* @param customDomain 阿里云自定義域名
* @param fileDir 阿里云OSS服務的訪問域名路徑
* @param endPoint 阿里云OSS服務的訪問域名
* @param accessKeyId 訪問密鑰id
* @param accessKeySecret 訪問密鑰串
* @param bucketName 上傳文件的存儲空間名稱
* @return {@link String } 返回訪問的全路徑
* @author liuyanqiang
* @since 2023/04/19 06:32
**/
public static String uploadFileToOSS(MultipartFile file, String customDomain, String fileDir, String endPoint, String accessKeyId, String accessKeySecret, String bucketName) {
// 初始化oss
initOSS(bucketName, endPoint, accessKeyId, accessKeySecret);
String visitUrl = null;
try {
// 獲取文件名
String orgName = file.getOriginalFilename();
if (StringUtils.isEmpty(orgName)) {
orgName = file.getName();
}
orgName = getFileName(orgName);
//文件名稱后綴使用
// 拼接文件路徑
String fileRelName = fileDir + DateUtil.format(new Date(), "yyyyMMdd") + "/" + System.currentTimeMillis() + "_" + orgName;
// 上傳至oss
PutObjectResult result = ossClient.putObject(bucketName, fileRelName, file.getInputStream());
if (result != null) {
log.info("------OSS文件上傳成功------");
}
// 拼接訪問路徑
visitUrl = "https://" + customDomain + "/" + fileRelName;
} catch (IOException e) {
log.error(e.getMessage(), e);
return null;
}
return visitUrl;
}
/**
* 刪除文件
*
* @param bucketName 上傳文件的存儲空間名稱
* @param fileName 要刪除的文件名稱
* @param endPoint 阿里云OSS服務的訪問域名
* @param accessKeyId 訪問密鑰id
* @param accessKeySecret 訪問密鑰串
* @return {@link VoidResult }
* @author liuyanqiang
* @since 2023/04/19 06:30
**/
public static VoidResult deleteFileToOSS(String bucketName, String fileName, String endPoint, String accessKeyId, String accessKeySecret) {
// 初始化oss
initOSS(bucketName, endPoint, accessKeyId, accessKeySecret);
return ossClient.deleteObject(bucketName, fileName);
}
/**
* 初始化 oss 客戶端
*
* @param bucketName 上傳文件的存儲空間名稱
* @param endpoint 阿里云OSS服務的訪問域名
* @param accessKeyId 訪問密鑰id
* @param accessKeySecret 訪問密鑰串
* @return {@link OSSClient }
* @author liuyanqiang
* @since 2023/04/19 18:23
**/
private static OSSClient initOSS(String bucketName, String endpoint, String accessKeyId, String accessKeySecret) {
if (ossClient == null) {
synchronized (OSSClient.class) {
if (ossClient == null) {
ossClient = new OSSClient(endpoint, new DefaultCredentialProvider(accessKeyId, accessKeySecret), new ClientConfiguration());
// 設置權(quán)限(公開讀)
ossClient.setBucketAcl(bucketName, CannedAccessControlList.PublicRead);
}
}
}
return ossClient;
}
/**
* 判斷文件名是否帶盤符，重新處理
*
* @param fileName 文件名稱
* @return {@link String }
* @author liuyanqiang
* @since 2023/04/19 06:36
**/
public static String getFileName(String fileName) {
//判斷是否帶有盤符信息
// Check for Unix-style path
int unixSep = fileName.lastIndexOf('/');
// Check for Windows-style path
int winSep = fileName.lastIndexOf('\\');
// Cut off at latest possible point
int pos = (winSep > unixSep ? winSep : unixSep);
if (pos != -1) {
// Any sort of path separator found...
fileName = fileName.substring(pos + 1);
}
//替換上傳文件名字的特殊字符
fileName = fileName.replace("=", "").replace(",", "").replace("&", "").replace("#", "");
return fileName;
}
}
可參考官方文檔：如何通過Java在服務端簽名直傳并設置上傳回調(diào)_對象存儲-阿里云幫助中心文章來源：http://www.zghlxwxcb.cn/news/detail-539991.html
?文章來源地址http://www.zghlxwxcb.cn/news/detail-539991.html
到了這里，關(guān)于SpringBoot+Vue實現(xiàn)阿里云OSS服務器簽名直傳并且返回回調(diào)數(shù)據(jù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
