微信小程序对接阿里云OSS

开通oss服务和创建oss存储空间就不说了，下面直接进入主题

进入oss控制台，选择已经创建好的存储空间，选择基础设置里面的"跨域设置",之后点击创建规则，

按照图上面配置就行

去文档页面下载代码示例

打开upload.js文件填入上面三个参数值

上面三个参数的由来

打开代码示例中的index.html文件，上传文件到oss存储空间，通过浏览器查看请求信息，这里有两个参数是要用到小程序中上传文件的

现在可以通过小程序上传图片到oss里了，.js文件定义个函数

 upload: function(){wx.chooseImage({success: function (res) {var tempFilePaths = res.tempFilePathsconsole.log('chooseImage success, temp path is: ', tempFilePaths[0])wx.uploadFile({url: 'http://www.ieesee.cn',filePath: tempFilePaths[0],name: 'file',formData: {name: tempFilePaths[0],key: "${filename}",policy: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",OSSAccessKeyId: "xxxxxxxxxxxxxxxx",success_action_status: "200",signature: "xxxxxxxxxxxxxxxxxxxxxxxxxx",},success: function (res) {console.log('chooseImage success, temp path is: ', tempFilePaths[0])wx.showToast({title: "上传成功",icon: 'success',duration: 1000})},fail: function ({errMsg}) {console.log('upladImage fail, errMsg is: ', errMsg)wx.showToast({title: "上传失败",duration: 1000})},})}})}

.wxml文件，<view>绑定.js中的upload函数

这样就完成了微信小程序上传图片到oss中，但是这里有个域名的问题，小程序只支持https访问，oss提供的外网域名虽然也是https的，但是腾讯做出的限制，蛋疼

oss提供的域名不能用了，还好oss有绑定域名的功能

这里绑定了www.ieesee.cn的域名去解析oss域名，但是这个域名只能通过http访问，通过https无法访问到图片，上面图中有一个"证书托管"的选项，用它来解决https的问题

配置证书托管需要公钥和秘钥，这个去哪里搞呢？去域名服务控制台选择SSL证书，申请对应域名的证书

申请完了去下载证书，到"CA证书服务控制台"查看证书签发状态，如果是已签发就可以下载证书了

在下载页面我选择"其他"

下载下来的文件包括以下文件，红圈标记的是有用的.key是秘钥，.pem是公钥，将文件内容复制到"证书托管"中，配置完成提示15分钟生效

接下来就可以把https://www.ieesee.cn配置到小程序控制台中了，大功告成

上传视频

  uploadVideo: function () {wx.chooseVideo({maxDuration: 10,success: function (res) {console.log(res)var tempFilePath = res.tempFilePathconsole.log('video path: ', tempFilePath)wx.uploadFile({url: 'https://www.ieesee.cn',filePath: tempFilePath,name: 'file',formData: {name: tempFilePath,key: "test/${filename}",policy: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",OSSAccessKeyId: "xxxxxxxxxxxxxxxxxxxxxxxxxx",success_action_status: "200",signature: "xxxxxxxxxxxxxxxxxxx",},success: function (res) {console.log('chooseImage success, temp path is: ', tempFilePath)wx.showToast({title: "上传成功",icon: 'success',duration: 1000})},fail: function ({ errMsg }) {console.log('upladImage fail, errMsg is: ', errMsg)wx.showToast({title: "上传失败",duration: 1000})},})}})},

微信小程序对接阿里云OSS相关推荐

微信小程序：阿里云OSS直传实践-PHP实现服务端签名
目录 1.阿里云OSS上传方式 1.1.Web端Browser.js SDK直传(不推荐) 1.2.Web端上传服务端再上传至OSS 1.3.服务端签名后Web端直传(推荐) 2.PHP服务端生成签名 ...
微信小程序对接阿里云视频点播，备忘
upvideo(){var aliOssParams = util.aliOssParams();//主要是获取上传阿里云的加密策略policy和签名signature;以及上传自己要上传到阿里云的地 ...
微信小程序使用阿里云物联网API开发物联网应用
微信小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下就可以打开的应用. 微信小程序具有方便快捷,速度快,安全及保密性高的优点,同时开发 ...
【物联网】微信小程序接入阿里云物联网平台
微信小程序接入阿里云物联网平台一阿里云平台端 1.登录阿里云阿里云物联网平台点击进入公共实例,之前没有的点进去申请 2.点击产品->创建产品 3.产品名称自定义,按项目选择类型,节点类型 ...
小程序配置阿里云OSS下载文件，在请求头里配置生成强制下载链接，（拿到下载链接可以下载文件至本地）
小程序配置阿里云OSS下载文件,在请求头里配置生成强制下载链接,(拿到下载链接可以下载文件至本地)(Win10电脑开发环境)**这里只说明小程序端问题**<菜鸡总结大神勿喷!蟹蟹~> 大体 ...
微信小程序接入阿里云直播
小程序接入阿里云直播前言:最近工作中遇到了小程序接入阿里云直播的需求(暂时只做播流,也就是播放端),于是打开阿里云直播文档发现居然没有小程序的相关文档,sdk也没有小程序的版本,网上也没搜到相关案例 ...
微信小程序实现阿里云上传
先安装,我使用composer安装在项目的根目录运行composer require aliyuncs/oss-sdk-php 微信小程序页面 <l-image-picker count=&q ...
微信小程序——引用阿里云字体
阿里图标官网:http://www.iconfont.cn 使用阿里云图标大致的方法就是:选中你的图标--保存至你的项目--下载你的图标项目--在项目中引用字体文件. 具体方法可以参考:引用阿里云矢量 ...
开发微信小程序之阿里云服务器搭建|前后端分离
第一次做项目开发,于是写了一篇博客记录一下开发过程中学到的东西,之前没有写博客的经验,所以写的有问题的地方欢迎各位大佬指教如果之前没有免费试用过阿里云的服务器,可以进到这个网址 https://fr ...

微信小程序对接阿里云OSS

微信小程序对接阿里云OSS相关推荐

最新文章

热门文章