微信小程序 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 19 Javascript
一个简单的jquery进度条示例
Apr 28 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
对JavaScript中this指针的新理解分享
Jan 31 Javascript
angularJS 中input示例分享
Feb 09 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
Sep 27 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
Angularjs之filter过滤器(推荐)
Nov 27 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 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的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
详解Python3的TFTP文件传输
2018/06/26 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
深入解析神经网络从原理到实现
2019/07/26 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
基于python实现雪花算法过程详解
2019/11/16 Python
国际政治个人自荐信范文
2013/11/26 职场文书
如何写好升职自荐信
2014/01/06 职场文书
煤矿安全生产标语
2014/06/06 职场文书
离职报告格式
2014/11/04 职场文书
党支部工作总结2015
2015/04/01 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
MySQL的Query Cache图文详解
2021/07/01 MySQL
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS