微信小程序 wx.uploadFile无法上传解决办法


Posted in Javascript onDecember 14, 2016

微信小程序 wx.uploadFile无法上传解决办法

微信安卓客户端无法使用wx.uploadFile上传文件的问题有不少开发者都遇到。

我也因为一直不能解决,硬着头皮提交审核最后被拒(抱着审核者最好用iOS检测的心态,不巧审核我应用的用的是安卓),才尝试使用第三方的手段解决。

最终我是用了七牛第三方存储的方式,将文件直接上传至七牛的储存的空间上再回调使用。

当然像又拍云,万象优图这些第三方存储源都可以采用这种思路。

首先是将七牛的https上传域名放进小程序的域名名单中。

这里我使用的是七牛华东区的域名https://up.qbox.me。

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

根据七牛的官方文档说明 http://developer.qiniu.com/docs/ ... up/form-upload.html

微信小程序 wx.uploadFile无法上传解决办法

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

然后在服务端部署获取上传凭证的业务代码,通过wx.request请求获取token。

var that = this;

   wx.request({

    url: 'https://xxx/token',

    method: 'POST',

    data: {},

    header: {

     'content-type':'application/x-www-form-urlencoded'

    },

    success: function(res) {

      that.token = res.data; //默认返回一个token,赋值给已经有的token属性。这里只是示例,具体根据需求可自行设定。

    },

    fail:function (res) {

     console.log(res)

    }

   })

 具体如何部署七牛凭证代码,可参考http://78re52.com1.z0.glb.cloudd ... %9C%8D%E5%8A%A1.pdf

获得凭证后就可以通过wx.uploadFile上传了。具体代码为:

var that = this;

  var key = Math.random().toString(36).substr(2); //生成一个随机字符串的文件名

  wx.uploadFile({

   url: 'https://up.qbox.me',

   filePath: flie,

   name: 'file',

   formData:{

    'token': that.token,//刚刚获取的上传凭证

    'key': key//这里是为文件设置上传后的文件名

   },

   success: function(r){

    var data = r.data;//七牛会返回一个包含hash值和key的JSON字符串

    if(typeof data==='string')data = JSON.parse(data.trim());//解压缩

    if(data.key){

     ... //这里就可以直接使用data.key,文件已经上传成功可以使用了。如果是图片也可以直接通过image调用。

    }

   },

   fail:function (res) {

    console.log(res)

   }

  })

最终采用这种方式解决了安卓无法上传文件的问题,当然上传自身服务器的问题还是有待解决。

不过对于急需解决方案的开发者还是提供了一个可行的方案。

现在利用第三方图源或存储源是一个普遍的方案,很多存储源例如七牛,又拍云,万象优图都提供了免费的空间供开发者使用。

建议大家也多做这方面的架构和尝试。

 感谢阅读,希望能帮助到大家,谢谢大家对本站 的支持!

Javascript 相关文章推荐
JavaScript 通过模式匹配实现重载
Aug 12 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
深入理解JS的事件绑定、事件流模型
May 13 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
js尾调用优化的实现
May 23 Javascript
微信小程序实用代码段(收藏版)
Dec 17 Javascript
JavaScript实例 ODO List分析
Jan 22 Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 #Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 #Javascript
实例解析Array和String方法
Dec 14 #Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 #Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 #Javascript
浅谈Javascript中的Label语句
Dec 14 #Javascript
详解jQuery中基本的动画方法
Dec 14 #Javascript
You might like
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
JavaScript版代码高亮
2006/06/26 Javascript
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
Javascript浅谈之this
2013/12/17 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
python对数组进行反转的方法
2015/05/20 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
分享vim python缩进等一些配置
2018/07/02 Python
python内打印变量之%和f的实例
2020/02/19 Python
python nohup 实现远程运行不宕机操作
2020/04/16 Python
如何整合JQuery和Prototype
2014/01/31 面试题
啤酒销售实习自我鉴定
2013/09/24 职场文书
实习生自我鉴定范文
2013/12/05 职场文书
优秀幼教自荐信
2014/02/03 职场文书
销售队伍口号
2014/06/11 职场文书
教室布置标语
2014/06/26 职场文书
承诺书样本
2014/08/30 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript