更新记录
1.0.0(2025-07-11)
初版
平台兼容性
uni-app(4.06)
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | - | - | √ | - | 10.0 | 12 | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | - | √ | - | - | - |
uni-app x(4.06)
Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
---|---|---|---|---|---|
- | - | - | - | - | - |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | × | √ |
使用说明
本插件是一个云端上传插件,支持小程序端和APP端,能够将本地的文件包括图片上传到云存储,OSS是火山引擎推出的专业图像处理的一个服务;此插件让你简单直接使用,无需阅读文档,下载即可使用.
本插件使用说明,请耐心看完,建议下载完整项目试用
-
火山云后台创建存储桶,权限改为公共读等这些就不在做过度阐述,只挑重点
-
在你自己的页面中引入upload文件
<script setup name=''> import Upload from '@/components/wlp-oss/wlp-oss.vue' </script> <template> <view> <Upload></Upload> </view> </template> <style scoped lang='scss'> </style>
-
utils/home文件中为获取stsToken的后端接口,请替换成你自己的后端接口,我自己的响应参数为
data: {
accessKeyId: "XXXXXX3Y2Q1Yzc0NGI0YmIwNTA3ZDgxMzFhM2E1M2Y"
currentTime: "2024-12-31T11:36:59+08:00"
expiredTime: "2024-12-31T11:46:59+08:00"
secretAccessKey: "XXXX5oYsJbCN/KaI0aE47ujnSh0i9Y6QPnswEb7rODeIDt/qTIolP/VU"
sessionToken: "XXXXXMVEFjY2Vzc0tleUlkIjoiQUtMVFp"
}
小程序的请在微信公众平台后台配置此域名
字段名 | 内容 |
---|---|
request 合法域名 | https://imagex.volcengineapi.com https://mcs.zijieapi.com https://tos-lf-x-tob.bytecdn.cn https://tos-lq-x-tob.bytecdn.cn https://tos-hl-x-tob.bytecdn.cn |
uploadFile 合法域名 | https://tos-lf-x-tob.bytecdn.cn https://tos-lq-x-tob.bytecdn.cn https://tos-hl-x-tob.bytecdn.cn |
tip:
1.我返回的key均为小写,与实际官网文档中不太一样,但是我的代码中已做处理!!!!!
2.uploadAuthApp接口请换成自己的后端接口
3.最后什么都不需要你处理,你只需要处理返回的 result = await upload([list.value[index].imgs])这个result,变成你想要的数据格式即可,upload可以实现多个图片上传,入参是个字符串数组,如:[img1,img2,img3],
4.支持小程序和app,正常使用即可,支持视频的将在后续继续更新
5.有问题请在下面评论区留言,会第一时间回复
最后如果显示上传成功,那么恭喜你完成了火山云oss图片上传