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


Posted in Javascript onMay 20, 2019

前言

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

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

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

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

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

上传文件访问域名

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

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

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

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

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

(三)服务端签名直传

点击查看文档

这里就不多做介绍了,这是上传文件到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)
  }
 })
 },

常见问题以及解决方法

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

Javascript 相关文章推荐
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 #Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 #Javascript
React如何实现浏览器打印部分内容详析
May 19 #Javascript
koa-router路由参数和前端路由的结合详解
May 19 #Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 #Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 #Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 #Javascript
You might like
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
php数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
如何利用node转发请求详解
2020/09/17 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
python连接mongodb密码认证实例
2018/10/16 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
团队精神演讲稿
2013/12/31 职场文书
工作自我评价范文
2015/03/05 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
辞职申请书范本
2019/05/20 职场文书
linux中nohup和后台运行进程查看及终止
2021/06/24 Python