更新记录
1.0.2(2024-07-23) 下载此版本
修改示例
1.0.1(2024-07-23) 下载此版本
优化上传,并增加二进制数据上传
1.0.0(2024-03-24) 下载此版本
1.0.0,基本上传功能实现
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
× | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.0 app-vue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
√ | √ | √ | √ |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
xpc-oss
格式 https://ielts-cdn.oss-cn-beijing.aliyuncs.com/
-
建议使用 STS 授权访问 https://help.aliyun.com/zh/oss/developer-reference/use-temporary-access-credentials-provided-by-sts-to-access-oss?spm=a2c4g.11186623.0.i2
-
查看 key https://ram.console.aliyun.com/manage/ak?spm=a2c4g.11186623.0.0.68f44a1cG9GGhE
-
调用实例
<script setup>
import XpcOss from "../../uni_modules/xpc-oss/js_sdk/oss";
// 获取 STS临时上传凭证
const getSTS = async () => {
const getOSS = await uni.request({
url: "http://192.168.1.6:3000/getSTS",
});
const ossDate = {
expiration: getOSS.data.Expiration,
access_key_secret: getOSS.data.AccessKeySecret,
access_key_id: getOSS.data.AccessKeyId,
security_token: getOSS.data.SecurityToken,
};
return ossDate;
};
const ossUpload = async () => {
const xpcOss = new XpcOss({
bucketName: "pengcheng933",
localDomainName: "oss-cn-chengdu.aliyuncs.com",
individualFileSize: 256,
storageDirectory: "test",
upLoadSTS: getSTS,
});
const imagePath = await uni.chooseImage({
count: 1, //默认9
sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有
sourceType: ["album"], //从相册选择
});
const startResult = await xpcOss.start(imagePath.tempFilePaths[0]);
// 返回格式{url: 'XX'},入股url有那么就是上传成功,否则就是失败
console.log(startResult);
};
</script>
- 备注,初始化完后再次调用,可以先 init 初始化实例,再调用 start
<script setup>
import XpcOss from "../../uni_modules/xpc-oss/js_sdk/oss";
// 获取 STS临时上传凭证
const getSTS = async () => {
const getOSS = await uni.request({
url: "http://192.168.1.6:3000/getSTS",
});
const ossDate = {
expiration: getOSS.data.Expiration,
access_key_secret: getOSS.data.AccessKeySecret,
access_key_id: getOSS.data.AccessKeyId,
security_token: getOSS.data.SecurityToken,
};
return ossDate;
};
const ossUpload = async () => {
const xpcOss = new XpcOss({
bucketName: "pengcheng933",
localDomainName: "oss-cn-chengdu.aliyuncs.com",
individualFileSize: 256,
storageDirectory: "test",
upLoadSTS: getSTS,
});
const imagePath = await uni.chooseImage({
count: 1, //默认9
sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有
sourceType: ["album"], //从相册选择
});
const startResult = await xpcOss.start(imagePath.tempFilePaths[0]);
// 返回格式{url: 'XX'},入股url有那么就是上传成功,否则就是失败
console.log(startResult);
const imagePath2 = await uni.chooseImage({
count: 1, //默认9
sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有
sourceType: ["album"], //从相册选择
});
xpcOss.init()
const startResult2 = await xpcOss.start(imagePath2.tempFilePaths[0]);
// 返回格式{url: 'XX'},入股url有那么就是上传成功,否则就是失败
console.log(startResult2);
};
</script>
- 我发现有些 IOS 路径,uniapp 无法读取里面的二进制信息,如果遇到了,可以用原生去读取二进制数据然后传给插件,也能传到阿里云去
<script setup>
import XpcOss from "../../uni_modules/xpc-oss/js_sdk/oss";
// 获取 STS临时上传凭证
const getSTS = async () => {
const getOSS = await uni.request({
url: "http://192.168.1.6:3000/getSTS",
});
const ossDate = {
expiration: getOSS.data.Expiration,
access_key_secret: getOSS.data.AccessKeySecret,
access_key_id: getOSS.data.AccessKeyId,
security_token: getOSS.data.SecurityToken,
};
return ossDate;
};
const ossUpload = async () => {
const xpcOss = new XpcOss({
bucketName: "pengcheng933",
localDomainName: "oss-cn-chengdu.aliyuncs.com",
individualFileSize: 256,
storageDirectory: "test",
upLoadSTS: getSTS,
});
// 自行通过getArratBuffer获取二进制数据
const arrayBuffer = getArratBuffer()
// 这里需要多传一个参数表示文件后缀名是啥
const startResult = await xpcOss.start(arrayBuffer, '.mp3');
// 返回格式{url: 'XX'},入股url有那么就是上传成功,否则就是失败
console.log(startResult2);
};
</script>