微信小程序文件直接上传阿里云OSS

第一步配置Bucket跨域访问

第二步微信小程序配置域名白名单

以上两步，请参考阿里云官网，如何在微信小程序环境下将文件上传到OSS_对象存储 OSS-阿里云https://help.aliyun.com/document_detail/92883.html

安装依赖 wx-oss-upload

npm install wx-oss-upload --save

然后创建自己的上传方法，引用 wx-oss-upload

import OssUpload from 'wx-oss-upload' // 上传插件
import {getSts
} from '@/api/system.js' // 后台获取签名方法/*** @description 参数以对象形式传入* @param {String} host 存储空间访问域名 必填* @param {String} bucketType 桶存储类型* @param {String} folder 文件存放位置路径，例如 /xx/xx/* @param {String} filePath 本地上传文件路径 必填* @param {String} fileName 本地上传文件名称*/
export async function uploadFile(data) {const params = await getSts(data.bucketType)const {accessKeyId,accessKeySecret,securityToken,expiration} = params.credential;const ossUpload = new OssUpload({accessKeyId,accessKeySecret,expirationTime: expiration })return await ossUpload.uploadFile({host: data.host,folder: data.folder,filePath: data.filePath,fileName: data.fileName,securityToken})
}

然后在选取文件后，调用自定义上传方法即可,此处采用uniapp API做展示，原生微信小程序也可使用

             uni.chooseImage({count: 1,sizeType: ['compressed'],sourceType: ['camera']}).then(async ([err, res]) => {if (res) {uni.showLoading({mask: true,title: '打卡上传中...'})uploadFile({host: '', // 阿里云地址folder: '', // 阿里云存放文件夹filePath: res.tempFilePaths[0],}).then(res => {console.log(res); // 输出结果 { url: 'xxx' }})}})

微信小程序文件直接上传阿里云OSS相关推荐

微信小程序将资源上传阿里云OSS
我们在实际业务中经常能遇到将各种资源上传到云服务器,这样做第一是能更好的管理我们的比如图片资源,视频,音频资源等,同时也能节约公司的网络带宽,减少各种资源随着时间的推移资源越来越多造成服务器的硬盘压力 ...
文件分片上传阿里云OSS
本文参考其他博客并结合自身编写博客原作者:程序猿谢哥哥博客原地址:https://blog.csdn.net/weixin_42825651/article/details/108792264 注 ...
php微信上传视频文件在哪里,微信小程序中实现上传视频的开发代码
本篇文章给大家带来的内容是关于微信小程序中实现上传视频的开发代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 其实这个比较简单,官方提供了API接口,基本上直接调用就可以了,话不多 ...
php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除点击上传作业在js文件中: Page({ / ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
微信小程序实现录音上传
微信小程序实现录音上传准备开始准备 1.微信开发者工具 2.Api文档开始打开微信开发者工具项目->新建项目选择小程序 appid是在微信公众平台申请的. 链接新建完成后,项目自 ...
微信开发上传视频到服务器,微信小程序中实现上传视频的开发代码
微信小程序中实现上传视频的开发代码,视频,接口,上传,代码,服务器微信小程序中实现上传视频的开发代码易采站长站,站长之家为您整理了微信小程序中实现上传视频的开发代码的相关内容. 本篇文章给大家带来 ...
微信小程序上传多张图片到服务器,怎么在微信小程序中同时上传多张图片
怎么在微信小程序中同时上传多张图片发布时间:2021-04-16 18:05:52 来源:亿速云阅读:99 作者:Leah 今天就跟大家聊聊有关怎么在微信小程序中同时上传多张图片,可能很多人都不太 ...
微信小程序使用MQTT远程控制单片机——阿里云物联网平台
微信小程序使用MQTT远程控制单片机--阿里云物联网平台① 阿里云物联网平台的使用第一,注册阿里云第二,找到找到物联网平台并创建设备 MQTT协议格式的讲解 MQTT中文文档固定报头 Fixed ...

微信小程序文件直接上传阿里云OSS

微信小程序文件直接上传阿里云OSS相关推荐

最新文章

热门文章