Detailed explanation of WeChat applet wx. uploadFile encoding pitfalls, Applet wx. uploadfile

Detailed explanation of the Code pitfalls of the applet wx. uploadFile, And the applet wx. uploadfile

Wx is used for compiling small programs. uploadFile is used to upload image + text information. however, in the compilation process, the official demo and documentation are rarely described, which takes a lot of time.

Here is a bit about encoding, the main reason is that during the real machine preview, non-letter and number ASCII characters such as Chinese characters and Thai characters in formData are transmitted to the server, the transcoding code is not automatically executed, and garbled characters and overflow are generated, this leads to errors.

The uploadFile of is similar to the form with file upload in html (enctype = "multipart/form-data"). In this way, the post-uploaded form can contain files, it also contains other key-value data. The applet uses uploadFile to perform similar operations. The uploadFile code of my applet is as follows:

Wx. uploadFile ({url: 'https: // <upload_domain>/save', filePath: photoPath, // the image to be uploaded. The name: 'Food _ image' is obtained by chooseImage ', formData: {latitude: 0.0, longpolling: 0.0, comment ant_id: 0, city: 'beijing', name: 'beijing' // name }, // other form data success: function (res) {console. log ("addfood success", res) ;}, fail: function (res) {console. log ("addfood fail", res );},})},

The server is written in php. The file interface is saved here. I directly output the data in POST and _ FILES to the info. log File for debugging. The Code is as follows:

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';} 

Run the applet In the applet development tool, select the image, and upload the data. The server receives the data successfully. The data output by info. log is as follows:

FILES: {"food_image": {"name": "success", "type": "image \/jpeg", "tmp_name": "\/tmp \/phpe3zGok ", "error": 0, "size": 845941} POST: {"latitude": "0", "longpolling": "0", "restaurant_id": "0 ", "tags": "", "city": "\ u5317 \ u4eac", "name ": "\ u0e1b \ u0e31 \ u0e01 \ u0e01 \ u0e34 \ u0e48 \ u0e07"} city: Beijing name

(In ps: php, tmp_name in FILES indicates that the file is received. You can save the file by moving the temporary file from this path to the specified directory. The/tmp/phpe3zGok temporary file is displayed here, indicates that the file is successfully received) preview the applet to the mobile phone and Click Upload, but the problem occurs, as shown below:

The POST data is empty and FILES are successfully received, while the output $ _ POST data is garbled (in Chinese and Thai) and overflows.

As you can see, numbers are garbled, while other data is normal. It is obvious that there is a problem with encoding. The POST data output is empty, and the format is disordered due to garbled characters.

If there is a problem with encoding, try to change its encoding for transmission, and add it to the uploadFile Parameter

Header {"chartset": "UTF-8"} // or header {"content-type": 'application/x-www-form-urlencoded '}

However, it does not have any effect. It is still valid in mini-program tools, and garbled characters appear during mobile phone real machine preview. after reading this post, [Guide for beginners to skip the "39" wx. uploadFile: the data in the header is invalid during the real machine preview. It needs to be changed to formData. Inspired by this, we tried to add the encoded data to formData, but only the data is transmitted and the encoding is not changed. the debugging is still successful in the mini-program development tool, and the real machine preview has a problem, which should be answered by the team.

Knowing that the header is a bug, the encoding operation can only be performed manually for now, so I will encode all the data in the applet segment. in javascript, the string encoding function is encodeURI, which is also used in the applet. So I changed the code of the applet to the following:

Wx. uploadFile ({url: 'https: // <upload_domain>/save', filePath: photoPath, // the image to be uploaded. The name: 'Food _ image' is obtained by chooseImage ', formData: {latitude: encodeURI (0.0), longpolling: encodeURI (0.0), ant_id: encodeURI (0), city: encodeURI ('beijing'), name: encodeURI ('beijing') // name}, // other form data success: function (res) {console. log ("addfood success", res) ;}, fail: function (res) {console. log ("addfood fail", res );},})},

On the server side, the url Decoding function of php is 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';}

Test again. The output of the VM preview test is as follows:

ILES: {"food_image": {"name": "jpeg", "type": "image \/jpeg", "tmp_name": "\/tmp \/php1svqDs ", "error": 0, "size": 9561} POST: {"restaurant_id": "0", "tags": "", "longpolling": "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: beijing name: too many minutes too many latitude: 0 longpolling: 01_ant_id: 0

We can see that all data is output normally. In the POST data, city and name are encoded in urlencode format before decoding, and are output normally after decoding.
Now, I want to use a mini program to upload files to the server. I hope this method will be helpful to those who encounter the same problem.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.