微信小程序 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 相关文章推荐
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
js的[defer]和[async]属性
Nov 24 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
同步文本框内容JS代码实现
Aug 04 Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
24行JavaScript代码实现Redux的方法实例
Nov 17 Javascript
梳理一下vue中的生命周期
Dec 30 Vue.js
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
Terran魔法科技
2020/03/14 星际争霸
php MsSql server时遇到的中文编码问题
2009/06/11 PHP
php的一些小问题
2010/07/03 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
vue中使用input[type="file"]实现文件上传功能
2018/09/10 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
vue实现评价星星功能
2020/06/30 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
美国现代家具购物网站:LexMod
2019/01/09 全球购物
2014年道德讲堂实施方案
2014/03/05 职场文书
人事经理岗位职责
2014/04/28 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
贷款委托书怎么写
2014/08/02 职场文书
好的促销活动方案
2014/08/21 职场文书
先进事迹演讲稿
2014/09/01 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
大雁塔英文导游词
2015/02/10 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL