详解微信小程序 wx.uploadFile 的编码坑


Posted in Javascript onJanuary 23, 2017

编写微信小程序时,用到 wx.uploadFile,用来上传图片+文本信息.然而在编写过程中,由于官方的 demo 和文档描述很少,在几个坑上耗费了不少时间.

这里分享一个和编码有关的坑,主要是由于真机预览时 formData 中的非字母、数字的 ASCII 编码的字符如中文、泰文传输到服务端将不会自动进行转码码,并会会产生乱码及溢出,从而导致错误。

微信的 uploadFile 类似与 html 中的form带文件上传的表单 ( enctype=”multipart/form-data” ), 这样 post 上传的表单,可以包含文件,同时包含其它的键值数据。微信小程序用 uploadFile 实现类似的操作. 我的微信小程序端的uploadFile 代码如下 :

wx.uploadFile({
      url: 'https://<upload_domain>/save',
      filePath:photoPath, //待上传的图片,由 chooseImage获得
      name:'food_image',
      formData: {
       latitude:0.0,
       longitude:0.0,
       restaurant_id:0,
       city:'北京',
       name:'beijing' // 名称
      }, // HTTP 请求中其他额外的 form data
      success: function(res){
       console.log("addfood success",res);
      },
      fail: function(res) {
       console.log("addfood fail",res);
      },
     })
},

服务端我用的 php 编写,这里接受文件的接口为 save ,我将 POST和_FILES 里的数据直接输出到info.log 文件中用来进行调试.代码如下:

public function save(Request $request)
{
  error_log("FILES:" . json_encode($_FILES) . "\r\n", 3, "./logs/info.log");
  error_log("POST: " . json_encode($_POST) . "\r\n", 3, "./logs/info.log");
  error_log("city: " . $_POST["city"] . "\r\n", 3, "./logs/info.log");
  error_log("name: " . $_POST["name"] . "\r\n", 3, "./logs/info.log");
  error_log("latitude: " . $_POST["latitude"] . "\r\n", 3, "./logs/info.log");
  error_log("longitude: " . $_POST["longitude"] . "\r\n", 3, "./logs/info.log");
  error_log("restaurant_id: " . $_POST["restaurant_id"] . "\r\n", 3, "./logs/info.log");
  error_log("tags: " . $_POST["city"] . "\r\n", 3, "./logs/info.log");
echo 'success';
}

在小程序开发工具中运行小程序,选择好图片后进行上传操作,服务器端成功接收到数据,info.log输出的数据信息如下:

FILES:{"food_image":{"name":"store_265332457o6zAJszC4WsrwhUy55eh7iKJt7EQ1480318543139.jpg","type":"image\/jpeg","tmp_name":"\/tmp\/phpe3zGok","error":0,"size":845941}}
POST: {"latitude":"0","longitude":"0","restaurant_id":"0","tags":"","city":"\u5317\u4eac","name":"\u0e1b\u0e31\u0e01\u0e01\u0e34\u0e48\u0e07"}
city: 北京
name: ปักกิ่ง
latitude: 0
longitude: 0
restaurant_id: 0

( ps:php 中,FILES 里有 tmp_name 为收到了文件,将临时文件从该路径中移动到指定目录便可保存文件,这里看到有 /tmp/phpe3zGok 临时文件,说明成功收到了文件) 将小程序预览到手机上,点击上传,但却出现了问题,如下所示:

详解微信小程序 wx.uploadFile 的编码坑

POST 数据为空, FILES 成功收到,而单独输出的$_POST数据出现乱码(中文和泰文部分),出现了溢出.

可以看到,非英文,数字的数据是乱码,而其它数据没有问题,显然是编码出现了问题,POST 数据输出为空,由于乱码导致了溢出使得格式错乱.

编码有问题,那么就尝试改变它的编码进行传输, uploadFile 的参数中加入

header{“chartset”:”utf-8”}
//或者 
header{"content-type":'application/x-www-form-urlencoded'}

但是都没有什么效果,依然是在微信小程序工具中有效,而手机真机预览的时候出现乱码.在看到这篇帖子 【新手跳坑指南《三十九》wx.uploadFile】 才知道header 里的数据在真机预览的时候是无效的,需要改到 formData 中,受到了启发,尝试将编码数据加入formData 中,但仅仅传输了数据,并没有改变编码.依然是小程序开发工具中调试成功,而真机预览出了问题,这个估计要微信团队来回答了。

知道 header 是个bug , 那么编码的操作暂时只能手动进行了,于是我将小程序段的数据都进行编码. 在 javascript 中,字符串编码函数是 encodeURI, 在小程序中尝试,也有该函数,所以我将小程序代码改为如下

wx.uploadFile({
      url: 'https://<upload_domain>/save',
      filePath:photoPath, //待上传的图片,由 chooseImage获得
      name:'food_image',
      formData: {
       latitude:encodeURI(0.0),
       longitude:encodeURI(0.0),
       restaurant_id:encodeURI(0),
       city:encodeURI('北京'),
       name:encodeURI('beijing') // 名称
      }, // HTTP 请求中其他额外的 form data
      success: function(res){
       console.log("addfood success",res);
      },
      fail: function(res) {
       console.log("addfood fail",res);
      },
     })
},

服务器端, php 进行 url 解码的函数是 urldecode

public function save(Request $request)
{
  error_log("FILES:" . json_encode($_FILES) . "\r\n", 3, "./logs/info.log");
  error_log("POST: " . json_encode($_POST) . "\r\n", 3, "./logs/info.log");
  error_log("city: " . urldecode($_POST["city"]) . "\r\n", 3, "./logs/info.log");
  error_log("name: " . urldecode($_POST["name"]) . "\r\n", 3, "./logs/info.log");
  error_log("latitude: " . urldecode($_POST["latitude"]) . "\r\n", 3, "./logs/info.log");
  error_log("longitude: " . urldecode($_POST["longitude"]) . "\r\n", 3, "./logs/info.log");
  error_log("restaurant_id: " . urldecode($_POST["restaurant_id"]) . "\r\n", 3, "./logs/info.log");
  error_log("tags: " . urldecode($_POST["city"]) . "\r\n", 3, "./logs/info.log");
  echo 'success';
}

再次测试,真机预览测试输出如下:

ILES:{"food_image":{"name":"jpeg","type":"image\/jpeg","tmp_name":"\/tmp\/php1svqDs","error":0,"size":9561}}
POST: {"restaurant_id":"0","tags":"","longitude":"0","latitude":"0","city":"%E5%8C%97%E4%BA%AC","name":"%E0%B8%9B%E0%B8%B1%E0%B8%81%E0%B8%81%E0%B8%B4%E0%B9%88%E0%B8%87"}
city: 北京
name: ปักกิ่ง
latitude: 0
longitude: 0
restaurant_id: 0

可以看到,所有数据都正常输出,其中POST 数据中 city 和 name未解码前是 urlencode 编码形式的数据,解码后正常输出.
至此,我想使用小程序上传带文件信息到服务器端算是调通了, 希望这个方法能对出现同样问题的同学有一定帮助。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
JavaScript中的16进制字符(改进)
Nov 21 Javascript
javascript设计模式之中介者模式Mediator
Dec 30 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
jQuery中事件与动画的总结分享
May 24 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 #Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 #Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 #Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 #Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 #Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 #Javascript
jQuery弹出层插件popShow用法示例
Jan 23 #Javascript
You might like
Laravel中Trait的用法实例详解
2016/03/16 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
js 如何实现对数据库的增删改查
2012/11/23 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
angularjs $http调用接口的方式详解
2018/08/13 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
python计算日期之间的放假日期
2018/06/05 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
大专生自我鉴定范文
2013/10/01 职场文书
质量承诺书怎么写
2014/05/24 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
答谢词范文
2015/01/05 职场文书
大学生党课感想
2015/08/11 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers