微信小程序 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实现的页面日历
Nov 04 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
js创建对象的方法汇总
Jan 07 Javascript
JS 数字转换为大写金额的简单实例
Aug 04 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
PHP开发大型项目的一点经验
2006/10/09 PHP
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
Python3解释器知识点总结
2019/02/19 Python
python七夕浪漫表白源码
2019/04/05 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
浅析Python中字符串的intern机制
2020/10/03 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
zooplus波兰:在线宠物店
2019/07/21 全球购物
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
绘画设计学生的个人自我评价
2013/09/20 职场文书
三好学生评语大全
2014/12/29 职场文书
西湖英语导游词
2015/02/06 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书