微信小程序 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 Select操作大集合
May 26 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
Dec 31 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
Aug 17 Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 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
再说下636单管机
2021/03/02 无线电
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
PHP调用其他文件中的类
2018/04/02 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
浅谈Python的垃圾回收机制
2016/12/17 Python
简单的python后台管理程序
2017/04/13 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
python 实现批量图片识别并翻译
2020/11/02 Python
shell的种类有哪些
2015/04/15 面试题
查环查孕证明
2014/01/10 职场文书
建筑公司员工自我鉴定
2014/04/08 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
2014年关工委工作总结
2014/11/17 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
幼儿园六一主持词
2015/06/30 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang
redis中lua脚本使用教程
2021/11/01 Redis
Python turtle编写简单的球类小游戏
2022/03/31 Python