微信小程序 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 相关文章推荐
textarea的value是html文件源代码,存成html文件的代码
Apr 20 Javascript
对xmlHttp对象的理解
Jan 17 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
javascript时区函数介绍
Sep 14 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
简单实现jquery焦点图
Dec 12 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
Vue实现push数组并删除的例子
Nov 01 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 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与C#的值类型指向区别的详解
2013/05/21 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
php自动载入类用法实例分析
2016/06/24 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
angularjs指令之绑定策略(@、=、&)
2017/04/13 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
[00:35]可解锁地面特效
2018/12/20 DOTA
Python赋值语句后逗号的作用分析
2015/06/08 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
Python列表解析配合if else的方法
2018/06/23 Python
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
大专生的学习自我评价
2013/12/04 职场文书
商务英语应届生自我鉴定
2013/12/08 职场文书
考试违纪检讨书
2014/02/02 职场文书
小学师德师风整改措施
2014/10/27 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
2015年教师节主持词
2015/07/03 职场文书
用Python生成会跳舞的美女
2022/01/18 Python