详解微信小程序 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 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
Angular的自定义指令以及实例
Dec 26 Javascript
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
使用vue2.0创建的项目的步骤方法
Sep 25 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
vue2实现provide inject传递响应式
May 21 Vue.js
微信小程序侧边栏滑动特效(左右滑动)
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/11/22 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
php无限分类使用concat如何实现
2015/11/05 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
[29:23]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场1
2014/05/23 DOTA
python通过线程实现定时器timer的方法
2015/03/16 Python
python 判断网络连通的实现方法
2018/04/22 Python
Python小白垃圾回收机制入门
2020/06/09 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
一套软件测试笔试题
2014/07/25 面试题
公务员转正考察材料
2014/02/07 职场文书
辅导员评语
2014/05/04 职场文书
出生医学证明书
2014/09/15 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏