編寫微信小程式時，用到 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 臨時檔案，說明成功收到了檔案) 將小程式預覽到手機上，點選上傳，但卻出現了問題，如下所示：

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 編碼形式的資料，解碼後正常輸出．
至此，我想使用小程式上傳帶檔案資訊到伺服器端算是調通了， 希望這個方法能對出現同樣問題的同學有一定幫助。