// GetPolicy.js
const Base64 = require('js-base64');
function getPolicyEncode(policy) {
// 传入表单上传的policy字段,对policy进行Base64编码
const encodedPolicy = Base64.encode(JSON.stringify(policy));
return encodedPolicy;
}
export default getSignature;
// GetSignature.js
const Crypto = require('crypto-js');
const Base64 = require('js-base64');
function getSignature(policyEncoded, SecretKey){
// 利用SecretKey对Base64编码后的policy结果进行HMAC-SHA1签名计算
const bytes = Crypto.HmacSHA1(policyEncoded, SecretKey);
// 对计算结果进行Base64编码,得到最终的签名信息
const signature = Crypto.enc.Base64.stringify(bytes);
return signature;
}
export default getPolicyEncode;
// upload.vue
<template>
<uni-file-picker
v-model="showUrl.activityInform"
:limit="limit"
:auto-upload="false"
mode="list"
title="xxxx"
file-mediatype="all"
file-extname="png,jpg,jpeg,pdf"
@select="handleSelect($event, 'activityInform')"
>
</uni-file-picker>
</template>
data () {
return {
.... ,
showUrl: {
activityInform: [],
// .......
},
// 后端接口获得
uploadOss: {
Bucket: "", // oss桶
Key: "", // 文件路径
filePath: "", // oss 文件路径
AWSAccessKeyId: "",
SecretKey: "",
},
}
}
methods: {
handleSelect(files, field){
if (!files.tempFiles.length) return;
const date = new Date();
const file = files.tempFiles[0]; // 获取第一个文件信息
const timestamp = date.getTime();
const parts = file.name.split(".");
const name = parts.slice(0, parts.length - 1).join("."); // 获取文件名(不包括后缀)
const extension = parts[parts.length - 1]; // 获取后缀名
const fileName = `${name}_${timestamp}.${extension}`;
const { url, Bucket, filePath, SecretKey, AWSAccessKeyId } =
this.uploadOss;
const toISOString = new Date(Date.now() + 600000).toISOString();
const OSSPolicy = {
expiration: toISOString,
conditions: [
{ bucket: Bucket }, //
{ key: `${filePath}/${fileName}` },
],
};
const policyEncoded = getPolicyEncode(OSSPolicy); // 计算base64编码后的policy
const signature = getSignature(policyEncoded, SecretKey); // 计算签名
uni.uploadFile({
url,
filePath: file.path,
name: "file",
formData: {
// 从配置文件中获取到的AccessKeyID信息、计算得到的编码后policy及signature信息
AWSAccessKeyId,
policy: policyEncoded,
signature: signature,
key: `${filePath}/${fileName}`,
},
success: (res) => {
if (res.statusCode == 204) {
uni.showToast({ title: "上传成功", icon: "success" });
this.showUrl[field].push({
extname: extension,
name: fileName,
url: `${filePath}/${fileName}`,
});
this.uploadUrl[field].push(`${filePath}/${fileName}`);
} else {
uni.showToast({ title: "上传失败", icon: "fail" });
}
},
fail: (e) => {
console.log(e, "e");
},
});
}
}
uni-app小程序,上传文件到oss中
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- uni-app 微信小程序 上传图片 文件 uni.uploadFile() 、 uni.chooseImage(...
- 写在前面: 本篇致力于解决客户端上传文件,进度到99%后长时间卡顿问题。传统方案:调用服务端接口,将文件传至服务端...
- 以下是几个要点: 1.阿里云提供直传的方法有PutObject,以及PostObject(参见地址:https:/...
- Update3:配置文件。很多人不知道配置文件是啥样的,我把那个文件也发上来,按理说很好推测配置文件的内容。 co...