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

所属分类: 网络编程 / JavaScript 阅读数: 1712
收藏 0 赞 0 分享

前言

(一)开通OSS服务与新建Bucket

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

(二)设置Bucket属性,后台配置域名

上传文件访问域名

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

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

(三)服务端签名直传

点击查看文档

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

{
 "accessid": "6MKO******4AUk44",
 "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.imgesDir
 util.POST(
  dataUrl, {
  params,
  success: function(res) {
   if (res != null && res.data != null && res.data.success) {
   var result = res.data.result
   that.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)
  }
 })
 },

常见问题以及解决方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

Vue组件选项props实例详解

父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。本文将详细介绍Vue组件选项props,需要的朋友可以参考下
收藏 0 赞 0 分享

javascript将url解析为json格式的两种方法

本篇文章主要介绍了javascript将url解析为json格式的两种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

详解JS数组Reduce()方法详解及高级技巧

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素。接下来通过本文给大家分享JS数组Reduce()方法详解及高级技巧,一起看看吧
收藏 0 赞 0 分享

JS模拟超市简易收银台小程序代码解析

本文通过实例代码给大家介绍了JS模拟超市简易收银台小程序代码,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
收藏 0 赞 0 分享

JavaScript 完成注册页面表单校验的实例

下面小编就为大家带来一篇JavaScript 完成注册页面表单校验的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

简单的网页广告特效实例

下面小编就为大家带来一篇简单的网页广告特效实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue内容分发slot(全面解析)

下面小编就为大家带来一篇Vue内容分发slot(全面解析)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue自定义事件(详解)

下面小编就为大家带来一篇Vue自定义事件(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Mui使用jquery并且使用点击跳转新窗口的实例

下面小编就为大家带来一篇Mui使用jquery并且使用点击跳转新窗口的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

深入理解ES6的迭代器与生成器

本篇文章主要介绍了深入理解ES6的迭代器与生成器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多