詳解微信小程序wx.uploadFile的編碼坑

編寫微信小程序時，用到 wx.uploadFile，用來上傳圖片＋文本信息．然而在編寫過程中，由于官方的 demo 和文檔描述很少，在幾個坑上耗費(fèi)了不少時間．

創(chuàng)新互聯(lián)主營安陸網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,手機(jī)APP定制開發(fā),安陸h5重慶小程序開發(fā)公司搭建,安陸網(wǎng)站營銷推廣歡迎安陸等地區(qū)企業(yè)咨詢

這里分享一個和編碼有關(guān)的坑，主要是由于真機(jī)預(yù)覽時 formData 中的非字母、數(shù)字的 ASCII 編碼的字符如中文、泰文傳輸?shù)椒?wù)端將不會自動進(jìn)行轉(zhuǎn)碼碼，并會會產(chǎn)生亂碼及溢出，從而導(dǎo)致錯誤。

微信的 uploadFile 類似與 html 中的form帶文件上傳的表單 ( enctype=”multipart/form-data” ), 這樣 post 上傳的表單，可以包含文件，同時包含其它的鍵值數(shù)據(jù)。微信小程序用 uploadFile 實(shí)現(xiàn)類似的操作．我的微信小程序端的uploadFile 代碼如下 :

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);
      },
     })
},

服務(wù)端我用的 php 編寫，這里接受文件的接口為 save ，我將 POST和_FILES 里的數(shù)據(jù)直接輸出到info.log 文件中用來進(jìn)行調(diào)試．代碼如下：

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

在小程序開發(fā)工具中運(yùn)行小程序，選擇好圖片后進(jìn)行上傳操作，

( ps：php 中，F(xiàn)ILES 里有 tmp_name 為收到了文件，將臨時文件從該路徑中移動到指定目錄便可保存文件，這里看到有 /tmp/phpe3zGok 臨時文件，說明成功收到了文件) 將小程序預(yù)覽到手機(jī)上，點(diǎn)擊上傳，但卻出現(xiàn)了問題，如下所示：

POST 數(shù)據(jù)為空， FILES 成功收到，而單獨(dú)輸出的$_POST數(shù)據(jù)出現(xiàn)亂碼(中文和泰文部分)，出現(xiàn)了溢出．

可以看到，非英文，數(shù)字的數(shù)據(jù)是亂碼，而其它數(shù)據(jù)沒有問題，顯然是編碼出現(xiàn)了問題，POST 數(shù)據(jù)輸出為空，由于亂碼導(dǎo)致了溢出使得格式錯亂．

編碼有問題，那么就嘗試改變它的編碼進(jìn)行傳輸， uploadFile 的參數(shù)中加入

header{“chartset”:”utf-8”}
//或者　
header{"content-type":'application/x-www-form-urlencoded'}

但是都沒有什么效果，依然是在微信小程序工具中有效，而手機(jī)真機(jī)預(yù)覽的時候出現(xiàn)亂碼．在看到這篇帖子【新手跳坑指南《三十九》wx.uploadFile】才知道header 里的數(shù)據(jù)在真機(jī)預(yù)覽的時候是無效的，需要改到 formData 中，受到了啟發(fā)，嘗試將編碼數(shù)據(jù)加入formData 中，但僅僅傳輸了數(shù)據(jù)，并沒有改變編碼．依然是小程序開發(fā)工具中調(diào)試成功，而真機(jī)預(yù)覽出了問題，這個估計要微信團(tuán)隊(duì)來回答了。

知道 header 是個bug , 那么編碼的操作暫時只能手動進(jìn)行了，于是我將小程序段的數(shù)據(jù)都進(jìn)行編碼．在 javascript 中，字符串編碼函數(shù)是 encodeURI, 在小程序中嘗試，也有該函數(shù)，所以我將小程序代碼改為如下

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);
      },
     })
},

服務(wù)器端, php 進(jìn)行 url 解碼的函數(shù)是 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';
}

再次測試，真機(jī)預(yù)覽測試輸出如下：

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

可以看到，所有數(shù)據(jù)都正常輸出，其中POST 數(shù)據(jù)中 city 和 name未解碼前是 urlencode 編碼形式的數(shù)據(jù)，解碼后正常輸出．
至此，我想使用小程序上傳帶文件信息到服務(wù)器端算是調(diào)通了，希望這個方法能對出現(xiàn)同樣問題的同學(xué)有一定幫助。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前名稱：詳解微信小程序wx.uploadFile的編碼坑
URL分享：http://weahome.cn/article/jeisci.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

詳解微信小程序wx.uploadFile的編碼坑

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管