微信小程序 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获取页面上某个元素的代码
Mar 13 Javascript
判断复选框是否被选中的两种方法
Jun 04 Javascript
初步了解javascript面向对象
Nov 09 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
vue添加class样式实例讲解
Feb 12 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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
PHP+javascript液晶时钟
2006/10/09 PHP
js下函数般调用正则的方法附代码
2008/06/22 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
vue实现选中效果
2020/10/07 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
python的类方法和静态方法
2014/12/13 Python
Python通过正则表达式选取callback的方法
2015/07/18 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
Python面向对象进阶学习
2019/05/21 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
Python如何实现FTP功能
2020/05/28 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
python之pygame模块实现飞机大战完整代码
2020/11/29 Python
python 对xml解析的示例
2021/02/27 Python
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
公司财务工作总结的自我评价
2013/11/23 职场文书
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
导师工作推荐信
2015/03/27 职场文书
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏