微信小程序对接七牛云存储的方法

前言:

做小程序有一段时间了,总结一下做过的技术点,特此贡献给小伙伴们!项目中,有图片存储、视频存储、录音存储这三个需要云对接存储。

一、图片/视频/录音上传七牛对接

准备工作:

a、你要有一个七牛账号,实名认证后,在七牛的个人中心,有个秘钥管理-里面有一对秘钥,是上传必须的。这对秘钥,配置在后端,配置时可以设置允许上传格式,也可以设置为任何格式都可上传,让我们的后端大哥去慢慢弄吧。另外,还需要在七牛的对象存储里新建一个存储空间,所要上传的文件就是存储在你创建的空间里,如果你为了方便管理,也可以图片/视频/录音/其他各创建一个存储空间。这个存储空间名字,也要配置在后端的。

b、需要一个上传令牌token,一个文件上传对应一个token,这是必须的。上传令牌token还有时效性,后端配置1h,足以让你完成上传操作就行。这个token由我们自己后端生成,前端调接口获取token,或者像我这样,直接把接口丢在[uptokenURL]后面,七牛的会自己去取。也可以由我们自己先得到token,再丢给七牛。

uptokenURL:'https://get.qiniutoken.com/minibx/geo_f/gain_qn_toke',
uploadURL:'https://up.qbox.me',//华东
uptoken: token,uploadURL:'https://up.qbox.me',//华东

c、七牛的js文件qiniuUploader.js,在下面给的七牛地址里面,可以去下载。里面有个小程序的SDK,解压找到里面的qiniuUploader.js,在你需要上传的页面,导入这个js。https://developer.qiniu.com/sdk#community-sdk

1、图片上传七牛

通过小程序的方法,为用户提供添加本地图片,或者拍照,之后你会得到方法返回的图片临时路径。我们可以把图片维护在一个数组里,这样在上传七牛时,以队列的形式上传。

constqiniuUploader = require("../../libs/qiniuUploader.js");

var sourceType = [['camera'], ['album'], ['camera','album']];

var sizeType = [['compressed'], ['original'], ['compressed','original']];

var imageArray = [];// 点击事件,从本地相册选择图片或使用相机拍照。

chooseImage: function (e) {

var that =this;

wx.chooseImage({

  sourceType: sourceType[this.data.sourceTypeIndex],

  sizeType: sizeType[this.data.sizeTypeIndex],

  count:this.data.count[this.data.countIndex],//这个count可以用来删除当前图片

  success: function (res) {

  // 返回照片的本地文件路径,tempFilePath可以作为img标签的src属性显示图片vartempFilePaths = res.tempFilePaths;

  imageArray.push(tempFilePaths);

  that.setData({

  imageList: tempFilePaths

  })

  that.pictureUploadqiniuMethod(imageArray,"tupian_");

  },

})

},

//得到图片路径数组后,准备上传七牛

pictureUploadqiniuMethod: function (imageArray, fileHead){

var that =this;

for(vari =0; i < imageArray.length; i++) {

  var filePath = imageArray[i];

  var imgName = filePath.substr(30,50);

  qiniuUploader.upload(filePath, (res) => {

  //上传成功,上传成功一张图片,进入一次这个方法,也就是返回一次

   console.log(res)

},

(error) => {

  //图片上传失败,可以在七牛的js里面自己加了一个err错误的返回值console.log('error: '+ error)

},

{

  domain:'oqxfq54dn.bkt.clouddn.com',

  uptokenURL:'https://get.qiniutoken.com/minibx/geo_f/gain_qn_token',

  uploadURL:'https://up.qbox.me',//华东key: fileHead + imgName,// 自定义文件 keyregion:'ECN',

});

}

},

红线框内的这块代码,是七牛qiniuUploader.js文件里的,我加了一个if判断,为了防止虽然上传成功,但没有返回data,这样在代码112行获取返回data时,不至于直接报错。

 解释::

imageArray:准备上传的图片临时地址数组。

fileHead:自定义上传七牛文件名的头,为了区别上传文件,比如图片/视频/录音/其他,

imgName:自定义上传七牛文件名,前端处理嘛,我就简单的通过截取临时路径(filePath )的30-50位字符作为储存到七牛的文件名,即使你添加了两张相同的图片,小程序给你的临时路径也是不一样的,所以不会存在重名情况。

domain:下载资源时用到。如果设置,在上传后的success里返回的res.ImageURL字段,是一个带http的直接可以访问的文件地址,否则需要自己拼接。

key:最终储存到七牛的文件名,我这里的图片文件名=文件头(fileHead)+伪文件名(imgName)

uploadURL:上传到七牛的那个存储区域,上传区域和上传区域代码一定要对应上。

region:上传区域代码。

shouldUseQiniuFileName:表示是否由七牛来定义上传文件名,如果是 true,则文件 key 由 qiniu 服务器分配 (全局去重)。默认是 false,也就是我们自己来定义。如果key设置了,优先级最高。

七牛存储区域表:

这样,在需要上传页面调用七牛的qiniuUploader.js,就可以上传了。

 会遇到的问题: 

某张图片/视频/录音上传失败可能的原因:

①上传文件不是后端所允许的大小,图片一般小于3M。视频/录音我限制是小于1M

②上传文件格式在后端没有被允许。

③token获取失败,比如我遇到的,七牛的qiniuUploader.js文件通过接口获取token,默认是这样[var token = res.data.token;],而我们后端接口返回的token是这样

所以我需要在七牛的js文件里修改为[var token = res.data.extra;],要么让后端改。

2、视频上传七牛

视频上传和图片上传是一个套路,只是文件格式不同,视频一般就一个文件,不像图片有多张,需要搞个队列来上传。所以上传视频就这样:

//事件绑定,添加视频

chooseVideo: function (res) {

  var that =this;

  wx.chooseVideo({

    sourceType: sourceType[this.data.sourceTypeIndex],

    camera: camera[this.data.cameraIndex],

    maxDuration: duration[this.data.durationIndex],

    success: function (res) {

    var shipinFile= res.tempFilePath;

    that.setData({

    src: shipinFile

  });

    //用户寻选择好图片后,调用上传方法
  
    that.shipinUploadqiniuMethod(shipinFile,"shipin_");

    }

  })

},

//视频上传七牛

shipinUploadqiniuMethod: function (shipinFile, fileHead){

    var that =this;

    var shipinName = shipinFile.substr(30,50);
  
    qiniuUploader.upload(shipinFile, (res) => {

    //视频上传成功console.log(res)

  },

  (error) => {

    //视频上传失败,可以在七牛的js里面自己加了一个err错误的返回值

    console.log('error: '+ error)

  },

  {

    domain:'oqxfq54dn.bkt.clouddn.com',
  
    uptokenURL:'https://get.qiniutoken.com/minibx/geo_f/gain_qn_token',
  
    uploadURL:'https://up.qbox.me',//华东

    key: fileHead + shipinName ,// 自定义文件 keyregion:'ECN',//华东区域代码});

  }

},

3、录音文件上传七牛

小程序的录音格式为silk,录音上传七牛,可以和视频共用一个方法。但虽然上传成功了,状态码为403,七牛没有返回data,像这样:

正常上传时,能正常返回data,并且状态码是200

后端配置silk格式允许,这样应该是没问题的。

上传成功七牛却没有返回data,这个data里有文件传七牛那边在线地址,不返回我们怎么访问了。现在的处理是:把音频文件传到自己服务器。目前就只能这么办了。

这里是小程序对接七牛云存储的官方文档:

https://github.com/gpake/qiniu-wxapp-sdk/blob/master/README.md?ref=developer.qiniu.com

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

时间: 2017-07-29

微信小程序 自定义消息提示框

微信小程序 自定义消息提示框 需求描述: wx.showToast(OBJECT)接口调用,但是不需要icon和image,即便image为空也有占位,实际上只想输出自定义文本内容. 效果截图: 代码如下: <!--index.wxml--> <!-- 页面正文 --> <view> <block wx:for="{{50}}"> <view> 123456 123456 123456 123456 123456</vi

微信小程序 页面跳转传值实现代码

微信小程序 页面跳转传值实现代码 微信小程序的页面路径只能是五层: 现在场景如下: index(首页)打开新页面 list(列表)打开新页面search(条件查询)确定条件返回 list(列表): 这里有个限制,微信只能打开五层网页,意味着:在search页面点击确定的时候是要返回上一页: wx.navigateBack(OBJECT) 该api是无法带参数返回上一页的,微信给出的方法是在全局变量里面添加对象:(真特么操蛋) app.js加入变量search search:'', 后续js头部全

微信小程序 同步请求授权的详解

微信小程序 同步请求授权的详解 需求分析: 1.在小程序首次打开的时候,我需要同时请求获取多个权限,由用户逐一授权. (['scope.userInfo','scope.userLocation','scope.address','scope.record','scope.writePhotosAlbum']) 问题分析: 1. wx.authorize接口同时调用,请求多个权限,由于异步原因,将授权请求一并发出,显然不符合要求. 2. promise能很好的解决问题,试着尝试了一下,下面代码分

微信小程序三级联动地址选择器的实例代码

本文介绍了微信小程序三级联动地址选择器的实例代码,分享给大家,有需要的可以一起了解一下 在一些电商类的小程序中,地址选择这个功能一般是必备的,一般的收货信息都需要有一个能选择省市县的控件,当然也有些人为了省事就直接写了一个供输入的input,那么这样做的缺点不言而喻,而且用户体验也不是那么的好,今天的这篇文章就分享一下微信小程序地址选择的实现.省市县的数据以及区域码可以从国家统计局查询到,具体可以自己搜一下.照例先上源码和效果图 源码传送门 picker和picker-view组件 在正式介绍实

微信小程序 rich-text的使用方法

 微信小程序 rich-text的使用方法 rich-text 属性:nodes 类型:Array / String 结点列表 / HTML String 全局支持class和style属性,不支持id属性. 结点类型:type = node , name 标签名 String 是 支持部分受信任的HTML结点,  attrs 属性 Object 否 支持部分受信任的属性,遵循Pascal命名法 ,  children 子结点列表 Array 否 结构和nodes一致 结点类型:type = t

微信小程序获取微信运动步数的实例代码

现在运动计步很火,无论是蚂蚁森林,还是微信上都很火爆,本文介绍了微信小程序微信运动步数的实例代码,分享给大家 微信小程序API-微信运动 https://mp.weixin.qq.com/debug/wxadoc/dev/api/we-run.html#wxgetwerundataobject 思路:wx.login获取的code请求获取的session_key,wx.getWeRunData获取的iv,encryptData,将它们一起发送到后台解密就行了. 安全顾虑,因为只是示例所以直接传递

微信小程序-滚动消息通知的实例代码

写在前面: 这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器. 我们通过vertical属性(默认为false,实现默认左右滚动)设置为true来实现上下滚动. (需要注意的是:只要你的swiper存在vertical属性,无论你给值为true或者false或者不设参数值,都将实现上下滚动) 从深圳回来做了一个微信小程序的小项目,令人欣慰的一点事是,回来很快时间内把在深圳两天的房租给赚回来了,哈哈... wxml <s

微信小程序 本地图片按照屏幕尺寸处理

微信小程序 本地图片按照屏幕尺寸处理 前言: 个人感觉微信小程序的IDE用起来有时候不太方便,可能是之前用惯了Eclipse的原因吧.微信小程序的开发工具不支持直接将文件拷贝到目录下,所以首先要将图片文件导入到本地目录下,然后编写工具类获取屏幕的宽度和高度,具体步骤如下图. 1.本地图片导入 步骤一:选择最左侧的菜单中的项目 步骤二:选择打开后将图片直接拷贝到新建的image文件夹下 图片导入完成后,项目的整体目录结构如下图所示, 2.按屏幕尺寸自适应图片宽和高 步骤一:编写工具函数,返回封装后

微信小程序实现图片压缩功能

小龙大哥的微信小程序在初始阶段相当于IE界的6,在这里给大家说一个刚趟过去的坑. 拍照的API. wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,temp

微信小程序使用canvas自适应屏幕画海报并保存图片功能

小程序canvas的API并没有像其他的一样支持小程序独有的 rpx 自适应尺寸单位,在绘制内容时所应用的单位仍然是 px,那么如何实现不同尺寸屏幕的自适应呢? 我们的在开发中常用的参考屏幕尺寸(iPhone6)为:375*667: 那么想要适应其他尺寸的屏幕时只需按照iPhone6的绘制大小按比例进行换算即可: 获取系统屏幕尺寸 先利用wx.getSystemInfo (获取系统信息)的API获取屏幕宽度,然后除iPhone6的屏幕宽度,即可得到相对单位 // 在onLoad中调用 const

微信小程序绘制图片发送朋友圈

本文实例为大家分享了微信小程序绘制图片发送朋友圈的具体代码,供大家参考,具体内容如下 这种生成图片的效果是很常见的,实现起来也不难,跟原生js的差不多.需要注意的就是canvas标签上不要加太多的css,后果呢就是导致canvas不显示,还有呢就是canvas组件的优先级是最高的,所以会覆盖掉下面的所有内容,解决方法呢就是使用: 使用上面这两个组件是可以盖在canvas上面的. 注意:canvas绘制不支持网络图片,需要将网络图片保存成本地图片 onLoad: function(options)

微信小程序实现图片轮播及文件上传

 微信小程序实现图片轮播及文件上传 刚刚接触微信小程序,看着网上的资源写了个小例子,本地图片轮播以及图片上传. 图片轮播: index.js <span style="font-size:14px;">var app = getApp() Page({ data:{ mode: 'aspectFit', // src:'../images/timg1.jpg', imgUrls:[ '../images/1.jpg', '../images/2.jpg', '../imag

微信小程序实现图片预览功能

本文为大家分享了微信小程序实现图片预览的具体代码,供大家参考,具体内容如下 效果图 原理 使用wx.chooseImage选择本地图片: 使用wx.previewImage预览图片. WXML <view> <button bindtap="previewImage" type="primary">图片上传预览</button> <view class="tui-content"> <imag

微信小程序实现图片上传、删除和预览功能的方法

本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法.分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 布局 <view class="img-v"> <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <image src="{{i

tp5实现微信小程序多图片上传到服务器功能

最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: <!--选择图片 --> <view class="picture"> <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <im

微信小程序实现图片选择并预览功能

本文实例为大家分享了微信小程序实现图片选择并预览的具体代码,供大家参考,具体内容如下 (一).功能说明 做的是一个意见反馈,用户发表意见和上传图片,限制了最多只能上传三张图片. 其他要点:textarea使用,底部保存按钮固定 (二).小程序接口说明 wx.chooseLocation(Object object) 从本地相册选择图片或使用相机拍照. (三).效果图 效果如下: (四).代码展示 WXML页面: <view class="wrap"> <view cl

微信小程序实现图片上传功能实例(前端+PHP后端)

前言 几乎每个程序都需要用到图片.下面就来给大家介绍前端+PHP后端实现微信小程序实现图片上传功能,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 方法如下: 一.wxml文件 <text>上传图片</text> <view> <button bindtap="uploadimg">点击选择上传图</button> </view> <image src='{{source}}' style=