欢迎光临,了解微信小程序开发,就上易用通!

小程序开发填坑《四》wx.uploadFile无法上传的第三方解决

发布:2018-01-25 11:31浏览: 来源:网络 作者:tianshu

微信安卓客户端无法使用wx.uploadFile上传文件的问题有不少开发者都遇到。
我也因为一直不能解决,硬着头皮提交审核最后被拒(抱着审核者最好用iOS检测的心态,不巧审核我应用的用的是安卓),才尝试使用第三方的手段解决。

最终我是用了七牛第三方存储的方式,将文件直接上传至七牛的储存的空间上再回调使用。
当然像又拍云,万象优图这些第三方存储源都可以采用这种思路。

首先是将七牛的https上传域名放进小程序的域名名单中。
这里我使用的是七牛华东区的域名https://up.qbox.me

微信小程序wx.uploadFile采用的是multipart/form-data方式上传,即表单上传。

根据七牛的官方文档说明

小程序开发填坑《四》wx.uploadFile无法上传的第三方解决(图1) 

主要需要的就是file(文件本身)和token(上传凭证)。

然后在服务端部署获取上传凭证的业务代码,通过wx.request请求获取token。
  1. var that = this;
  2. wx.request({
  3.   url: 'https://xxx/token',
  4.   method: 'POST',
  5.   data: {},
  6.   header: {
  7.     'content-type':'application/x-www-form-urlencoded'
  8.   },
  9.   success: function(res) {
  10.      that.token = res.data; //默认返回一个token,赋值给已经有的token属性。这里只是示例,具体根据需求可自行设定。
  11.   },
  12.   fail:function (res) {
  13.     console.log(res)
  14.   }
  15. })
复制代码


具体如何部署七牛凭证代码,可参考 小程序开发填坑《四》wx.uploadFile无法上传的第三方解决(图2) 七牛云存储文件上传-基础上传服务.pdf 
获得凭证后就可以通过wx.uploadFile上传了。具体代码为:
  1. var that = this;
  2. var key = Math.random().toString(36).substr(2); //生成一个随机字符串的文件名
  3. wx.uploadFile({
  4.   url: 'https://up.qbox.me',
  5.   filePath: flie,
  6.   name: 'file',
  7.   formData:{
  8.     'token': that.token,//刚刚获取的上传凭证
  9.     'key': key//这里是为文件设置上传后的文件名
  10.   },
  11.   success: function(r){
  12.     var data = r.data;//七牛会返回一个包含hash值和key的JSON字符串
  13.     if(typeof data==='string')data = JSON.parse(data.trim());//解压缩
  14.     if(data.key){
  15.       ... //这里就可以直接使用data.key,文件已经上传成功可以使用了。如果是图片也可以直接通过image调用。
  16.     }
  17.   },
  18.   fail:function (res) {
  19.     console.log(res)
  20.   }
  21. })
复制代码


最终采用这种方式解决了安卓无法上传文件的问题,当然上传自身服务器的问题还是有待解决。
不过对于急需解决方案的开发者还是提供了一个可行的方案。

现在利用第三方图源或存储源是一个普遍的方案,很多存储源例如七牛,又拍云,万象优图都提供了免费的空间供开发者使用。
建议大家也多做这方面的架构和尝试。



免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。