详解微信小程序 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 相关文章推荐
javascript hashtable实现代码
Oct 13 Javascript
分享十五个最佳jQuery 幻灯插件和教程
Mar 27 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
基于input动态模糊查询的实现方法
Dec 12 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 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
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
javascript parseInt与Number函数的区别
2010/01/21 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
js实现计算器功能
2020/08/10 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
《童年的发现》教学反思
2014/02/14 职场文书
留学生求职信
2014/06/03 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
单位计划生育责任书
2015/05/09 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书