微信小程序上传文件到阿里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 相关文章推荐
JavaScript静态的动态
Sep 18 Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
jquery动态添加删除(tr/td)
Feb 09 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
vue+element实现批量删除功能的示例
Feb 28 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
js实现3D照片墙效果
Oct 28 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
[转]JS宝典学习笔记
2007/02/07 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
JS常用算法实现代码
2016/11/14 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
销售类个人求职信范文
2013/09/25 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
“学雷锋活动月”总结
2014/03/09 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
施工安全员岗位职责
2015/04/11 职场文书
发票退票证明
2015/06/24 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书