微信小程序 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 21 Javascript
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
微信小程序 教程之列表渲染
Oct 18 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
express+mockjs实现模拟后台数据发送功能
Jan 07 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&mysql(六)
2006/10/09 PHP
php 方便水印和缩略图的图形类
2009/05/21 PHP
php HandlerSocket的使用
2011/05/02 PHP
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
分享一段PHP制作的中文拼音首字母工具类
2014/12/11 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
python语言使用技巧分享
2016/05/31 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
《放小鸟》教学反思
2014/04/20 职场文书
副处级干部考察材料
2014/05/17 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
新店开张活动方案
2014/08/24 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
企业2014年度工作总结
2014/12/10 职场文书
大学生自荐书范文
2015/03/05 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
详解Vue的options
2021/05/15 Vue.js
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python