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

前言

(一)开通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)
   }
  })
 },

常见问题以及解决方法

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

(0)

相关推荐

  • 在webstorm开发微信小程序之使用阿里自定义字体图标的方法

    1.下载阿里图标,解压出来之后有个.css文件 然后复制这css里面的所有代码 2.新建一个wxss文件,例如我新建的就是iconfont.wxss,然后把刚才复制的所有代码,复制到这个文件里面去. 3.在需要使用到图标的页面导入该wxss文件.例如: 这样在该wxml页面就可以使用图标了 总结 以上所述是小编给大家介绍的在webstorm开发微信小程序之使用阿里自定义字体图标 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!

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

    前言 (一)开通OSS服务与新建Bucket 开通OSS服务这里省略,新建bucket. (二)设置Bucket属性,后台配置域名 上传文件访问域名 这里我们要在小程序后台配置上传域名(上面的域名是我自己的申请的,后台配置的是公司的的域名,使用的时候你们用一套东西即可). 下图是bucket管理,这里可以新建文件的保存路径,域名管理. (三)服务端签名直传 点击查看文档 这里就不多做介绍了,这是上传文件到oss需要的参数,这些数据可以从后台获取. { "accessid": "

  • 微信小程序 上传头像的实例详解

    微信小程序 上传头像的实例详解 最近在做微信小程序上传头像和上传照片功能就随手写一下代码: 上传头像html: <view class="edit-list"> <text class="list-name list-first">头像</text> <view class="edit-righr-bar"> <image class="head-portrait" src

  • 微信小程序上传帖子的实例代码(含有文字图片的微信验证)

    public.js var graceJS = require('../../utils/grace.js'); import { config } from '../../config.js' Page({ /** * 页面的初始数据 */ data: { imglist: [], title:'', content:'', }, delImg(e) { let index = e.currentTarget.dataset.index; let array = []; console.log

  • 小程序上传文件至云存储的实现

    在小程序云开发中,要实现上传文件至云存储,有两种方案:云函数和HTTP API,前者是在小程序内调用的,而后者则是在小程序外调用的.本文主要讲讲如何使用HTTP API实现小程序外上传文件至云存储. 一.原料 ① 小程序HTTP API② PHP③ Vue.js + Element UI HTTP API需要在服务器端发起调用,而这里我选择的后端语言是PHP.Element UI只是作为前端举例,我们可以用它的Upload组件来上传文件,如果是原生上传则直接用input file即可. 二.PH

  • 微信小程序上传多图到服务器并获取返回的路径

    微信小程序上传图片很简单: //点击选择图片 chooseimage:function(){ var that = this; wx.chooseImage({ count: 9, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function(res) { that.setD

  • 微信小程序实现多文件或者图片上传

    本文实例为大家分享了微信小程序实现多文件或者图片上传的具体代码,供大家参考,具体内容如下 html <view class="list1">     <view class="fonts">上传事件相关资料或文件(jpg/pdf/word)<text class="xuan">(选填)</text> </view>     <view class="cell"&

  • 微信小程序中wxs文件的一些妙用分享

    目录 前言 应用 过滤器 拖拽 文件之中相互传参 wxs传参到js逻辑层 js逻辑层传参到wxs文件 wxs中获取dataset(wxs中获取wxml数据) 注意点 总结 前言 wxs文件是小程序中的逻辑文件,它和wxml结合使用. 不同于js, wxs可以直接作用到视图层,而不需要进行视图层和逻辑层的setData数据交互: 因为这个特性,wxs非常适合应用于优化小程序的频繁交互操作中: 应用 过滤器 在IOS环境中wxs的运行速度要远高于js,在android中两者表现相当. 使用wxs作为

  • 实现微信小程序的wxml文件和wxss文件在webstrom的支持

    微信小程序的wxml文件和wxss文件在webstrom的支持 ebstrom默认不支持wxml文件和wxss文件,所以要进入设置里面手动添加支持. 对wxml文件的支持: 文件 -> 设置 -> 编辑器 -> 文件类型, 然后选择XML文件,然后点击下面的绿色添加按钮,如下图添加通配符设置,点击确认即可,然后点击确定按钮即可配置成功,就可看到webstrom支持wxml文件了 文件 -> 设置 -> 编辑器 -> 文件和代码模板, 点击上面的绿色添加按钮,如下图所示填

  • 微信小程序 动态传参实例详解

    微信小程序 动态传参实例详解 在微信小程序的开发过程中经常会用到动态传参,比如根据某一页面传参的不同,加载不同的新的页面.接下来介绍下如何实现. 上一篇博客中介绍了如何用wx:for循环显示数组,一般情况下我们要实现的功能是点击不同的元素进入不同的页面,比如在另一个页面加载某个元素的详细信息. 跳转这里采用navigator跳转,在navigator跳转的链接上将参数加上去: index.wxml(根据点击页面的不同传递参数) <view class="item" wx:for=

  • 微信小程序 页面传参实例详解

    微信小程序 页面传参 微信小程序的传参,页面跳转,页面之间传递参数在开发APP应用的时候会经常用到这样的功能,这里就用微信小程序来实现,大家可以看下如何实现,如有错误,请指正. 先上demo图: 为了简化逻辑,所以index.wxml里面只写了两个text.既然是跳转,那就还有其他页面. 目录如下: 三个页面,但是代码很简单.直接上代码. <span style="font-size:24px;"><!--index.wxml--> <view class

随机推荐