微信小程序上传文件到阿里OSS教程

前言

（一）开通OSS服务与新建Bucket

开通OSS服务这里省略，新建bucket。

（二）设置Bucket属性，后台配置域名

上传文件访问域名

这里我们要在小程序后台配置上传域名（上面的域名是我自己的申请的，后台配置的是公司的的域名，使用的时候你们用一套东西即可）。

下图是bucket管理，这里可以新建文件的保存路径，域名管理。

（三）服务端签名直传

点击查看文档

这里就不多做介绍了，这是上传文件到oss需要的参数，这些数据可以从后台获取。

{"Accessid": "*************","host": "http://post-test.oss-cn-hangzhou.aliyuncs.com","policy": "eyJleHBpcmF0aW9uIjoiMjAxNS0xMS0wNVQyMDoyMzoyM1oiLCJjxb25kaXRpb25zIjpbWyJjcb250ZW50LWxlbmd0aC1yYW5nZSIsMCwxMDQ4NTc2MDAwXSxbInN0YXJ0cy13aXRoIiwiJGtleSIsInVzZXItZGlyXC8iXV19","signature": "I2u5*******yff151E=","expire": 1446726203,"dir": "user-dir/"
}

accessid：用户请求的accessid。
host：用户要往哪个域名发送上传请求。
policy：用户表单上传的策略（Policy），是经过base64编码过的字符串。
signature：对变量policy签名后的字符串。
expire：上传策略失效时间，在PolicyText里指定。在失效时间之前，都可以利用此Policy上传文件，所以没有必要每次上传都去服务端获取签名。

Policy的内容：

{"expiration":"2015-11-05T20:23:23Z",
"conditions":[["content-length-range",0,1048576000],
["starts-with","$key","user-dir/"]]

Policy说明：

Policy中增加了starts-with，用来指定此次上传的文件名必须以user-dir开头，用户可自行指定此字符串。增加starts-with的原因是：在很多场景下，一个应用对应一个Bucket，为了防止数字覆盖，每个用户上传到OSS的文件都可以有特定的前缀。这样就存在一个问题，用户获取到这个Policy后，在失效期内都能修改上传前缀，从而上传到别人的目录下。为了解决这个问题，可以设置应用服务器在上传时就指定用户上传的文件必须是某个前缀。这样如果用户获取到了Policy也没有办法上传到别人的前缀上，从而保证了数据的安全性。

（四）微信小程序上传

  getCloudCdnParams: function(filePath, index) {var that = this;var dataUrl = app.globalData.laiSignBaseUrl + "open/getOSSClient"var params = new Object();params.type = app.globalData.imgesDirutil.POST(dataUrl, {params,success: function(res) {if (res != null && res.data != null && res.data.success) {var result = res.data.resultthat.uploadFileFun(result, filePath, index)}},fail: function() {},})},

因为上传文件有时效性，所以在每次上传的时候都要重新获取上传的参数。

 // 上传图片uploadFileFun: function(result, filePath, index) {var that = this;wx.uploadFile({url: app.globalData.uploadFileBaseUrl,filePath: filePath,/**上传的参数**/formData: {name: filePath,key: app.globalData.imgesDir + "demo-file" + result.expire + index,policy: result.policy,OSSAccessKeyId: result.accessid,success_action_status: "200",signature: result.signature,},success: function(res) {/**这边上传成功后要自己拼接文件的地址**/coverUrl: app.globalData.uploadFileBaseUrl + "/" + app.globalData.imgesDir + "demo-file" + result.expire + index},fail: function(res) {console.log(res)}})},

常见问题以及解决方法

微信小程序上传文件到阿里OSS教程相关推荐

微信小程序上传文件到自己的服务器
微信小程序上传文件到自己的服务器 1.建立 WebApi项目 (1)创建项目 (2)发布项目 2.后端接口代码 3.小程序端调接口 1.建立 WebApi项目 (1)创建项目选择菜单 "文 ...
微信小程序上传文件400
微信小程序上传文件400 直接上示例问题代码将请求头添加上Host即可解决直接上示例问题代码 wx.uploadFile({url: 'https://' + domain + '/post/up ...
微信小程序上传文件组件
微信小程序上传文件一.说明该拍照组件带有微信授权相机功能,会结合后端接口,将上传的图片以数组集合的形式传值给父级页面. 注意:组件适用于,单独上传图片,不携带参数,结合后端接口返回路径之后,再调用 ...
小程序上传文件到阿里云oss
本文仅举例上传图片和上传视频! 准备工作: 需要引入的js文件:https://download.csdn.net/download/impossible1994727/12328614 参考文档:h ...
微信小程序上传文件功能实现
在小程序开发开发中,可能会遇到需要上传文件的场景,用户需要从手机文件管理器中选择文件,然后上传到服务器.但是微信小程序只支持选择回话中的文件,无法从手机中选择.而且此api只支持微信端,不支持企业微信 ...
微信小程序上传文件详解
做微信小程序难免会遇到上传文件的问题.今天就给大家说一个简单的上传文件的例子吧 wxml代码 <button bindtap="upload">上传文件</but ...
微信小程序上传文件及图片（可以预览）
最近在写小程序项目,碰到了一个需求,需要用户可以上传各种类型的文件和图片,展示在页面上,并且点击还可以进行预览,就找了找微信小程序官网,写了一个例子,分享一下直接看代码: wxml: <vie ...
微信小程序上传文件（图片/word等）功能)
说到上传文件,首先要想到微信官方文档给的API,wx.uploadFile({ }) 通过这个API来达到上传至服务器的效果:代码示例如下接下来我们先来说说上传图片功能,这个比较简单一些上传图片: ...
微信小程序上传文件（可传 word、excel、ppt、视频、图片……）
文章目录前言示例代码前言近期做技术调研时发现微信官方支持文件上传了,这里记录一下官方 API:wx.chooseMessageFile(Object object) 交互:从微信聊天里选择文 ...

微信小程序上传文件到阿里OSS教程

微信小程序上传文件到阿里OSS教程相关推荐

最新文章

热门文章