小程式--剖析小程式上傳文件

前言

小程式開發的過程中，如果你涉及到文件的上傳，就需要使用微信提供的API去上傳文件：

wx.uploadFile()

官方文檔的解釋這裡就不多介紹了，主要看一下這個方法具體如何使用以及為什麼這樣使用。

正文

我們可以先看一下該API的參數說明：

其實wx.uploadFile的操作是你把要請求的數據以及要請求的伺服器URL傳遞給微信伺服器，微信伺服器再拿著這些數據進行三方伺服器請求。具體可參見下圖：(根據自己的理解畫的，如果不對，歡迎指正)

所以url也就是我們平時自己去請求我們自己的伺服器介面的地址，如果你的伺服器需要校驗session或者token，你可以在formData中添加，例如把需要的uid放到裡面：

 var formData = {
        uid: app.globalData.uid,
        sessionKey: wx.getStorageSync("SESSIONKEY")
      };

function upLoadFile(url, filePath, name, formData, success, fail) {
  
  wx.uploadFile({
    url: url,
    filePath: filePath,
    name: name,
    header: {
      'content-type': 'multipart/form-data'
    },
    formData:formData,    //請求額外的form data
    success:function(res) {
      console.log(res);
      if(res.statusCode ==200){
       typeof success == "function" && success(res.data);
      }else{
      typeof fail == "function" && fail(res.data);
      }
    },
    fail: function (res) {
      console.log(res);
      typeof fail == "function" && fail(res.data);
    }
  })
}

我這裡直接對上傳文件進行了封裝，微信伺服器通過我們給他的數據向我們的伺服器發送數據請求，請求成功後，微信伺服器會對我們自己的伺服器返回的信息進行包裝，放到res.data裡面，這樣我們就可以直接從res.data中獲取到我們的伺服器給我們反饋的信息了。 

為什麼要這麼做？而不是直接由我們向自己的伺服器發送請求呢？

 常規來說，我們直接調用我們自己伺服器的介面，然後我們自己的伺服器返回數據小程式端即可。但是從uploadFile操作來說，其實是微信伺服器把自己當做了中轉站，所有的發送都要通過微信中轉進行操作。個人覺得這樣做的原因如下：

1.微信伺服器有自己的一套臨時圖片鏈接，對於我們自己的伺服器而言無法識別。

2.鑒於安全考慮，微信伺服器會對圖片進行留存，保證內容在微信平臺上的合法性。

如果有其他的原因，也可以留言！我也在微信小程式開發中心做了提問，最新信息可以參見這裡。

參考文檔

1.網路請求