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

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

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

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

微信的 uploadFile 類似與 html 中的form帶文件上傳的表單 ( enctype=”multipart/form-data” ), 這樣 post 上傳的表單，可以包含文件，同時(shí)包含其它的鍵值數(shù)據(jù)。微信小程序用 uploadFile 實(shí)現(xiàn)類似的操作．我的微信小程序端的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 請(qǐng)求中其他額外的 form data
      success: function(res){
       console.log("addfood success",res);
      },
      fail: function(res) {
       console.log("addfood fail",res);
      },
     })
},

服務(wù)端我用的 php 編寫(xiě)，這里接受文件的接口為 save ，我將 POST和_FILES 里的數(shù)據(jù)直接輸出到info.log 文件中用來(lái)進(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';
}

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

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

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

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

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

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

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

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

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 請(qǐng)求中其他額外的 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';
}

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

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)通了，希望這個(gè)方法能對(duì)出現(xiàn)同樣問(wèn)題的同學(xué)有一定幫助。

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

分享文章：詳解微信小程序wx.uploadFile的編碼坑
鏈接分享：http://www.jbt999.com/article25/jeisci.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、營(yíng)銷型網(wǎng)站建設(shè)、App設(shè)計(jì)、軟件開(kāi)發(fā)、外貿(mào)網(wǎng)站建設(shè)、域名注冊(cè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)