微信小程序wx.uploadFile上传图片与文本的编码问题及解决方案
编写微信小程序时，wx。用于上传图片 +文本信息。但是，在写作过程中，由于少数官方的演示和文档描述，花了很多时间在几个坑上。
这是与编码有关的坑，主要是因为在真实机器的预览中，非字母和数字编码的字符（例如中文和泰语）将不会自动转码，并且会导致乱码的代码和溢出。 ，导致错误。
微信与html中的文件上传的形式相似（=“/form-data”）。这样，由Post上传的表单可以包含文件，还包含其他键值数据。微信小程序使用类似的操作。我的微信小程序的代码如下：
wx.uploadFile({ url: 'https:///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); }, }) },
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
我使用PHP在服务器上写入。在此处接受文件的接口保存。我将数据输出到帖子中，然后直接输入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'; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
在迷你程序开发工具中运行小程序，选择图片并上传。服务器成功接收数据。来自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
- 1
- 2
- 3
- 4
- 5
- 6
- 7
（PS：在PHP中，有一个已收到的文件。将临时文件从此路径移至指定的目录保存文件。在这里您看到一个临时文件 /TMP /，这意味着已接收到该文件已成功接收到该文件）预览手机上的小程序，单击上传，但存在一个问题，如下所示：
帖子数据是空的，并且已成功接收，而$数据输出则分别出现（中文和泰国部分），并发生溢出。
可以看出，数值数据的数据用英语涂抹，而其他数据没有问题。显然，编码存在问题。帖子数据的输出是空的，由乱码造成的溢出。
编码存在问题，因此请尝试更改其用于传输的编码，并添加参数
header{“chartset”:”utf-8”} //或者 header{"content-type":'application/x-www-form-urlencoded'}
- 1
- 2
- 3
但是它们都没有任何效果，并且它们仍然在微信迷你程序工具中有效，并且在预览手机的真实手机时会出现乱七八糟的代码。看到这篇文章[新手跳过“三十九” WX的指南。我受到启发，尝试添加编码的数据。但是数据仅传输，并且编码没有更改。 MINI程序开发工具的调试仍然成功，而真实机器预览的问题也存在问题，因此微信团队可能需要回答这一点。
我知道这是一个错误，因此只能暂时手动执行编码操作，因此我编码了Mini程序段中的所有数据。在，字符串编码函数是，在中尝试，并且还有此功能，因此我将小程序代码更改为以下
wx.uploadFile({ url: 'https:///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); }, }) },
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
PHP在服务器端执行URL解码的功能是
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'; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
再次测试，真实的机器预览测试输出如下：
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
- 1
- 2
- 3
- 4
- 5
- 6
- 7
可以看出，所有数据都是正常输出的，在解码之前，邮政数据中的城市和名称是编码数据，并且在解码后正常输出。
在这一点上，我想使用一个迷你程序将文件信息上传到服务器，以作为调整它的一种手段。我希望这种方法对遇到同样问题的学生有帮助。
原始链接：微信Mini WX的编码坑。