小程序上傳圖片到圖床

最近小組在做一個小程序，主要功能為用戶上傳文字圖片，來分享家鄉的相關信息。

文字的存取問題不難解決，直接請求后台操作數據庫就可以了，但是圖片的問題就有點麻煩。之前想的是把本地圖片的路徑存到數據庫里面，反正實訓項目也是自己本機調試，不過后來改了主意。

一方面是項目這樣寫不太合適，還有就是研究了半天沒能讀取本地圖片的路徑。。。

所以選擇了把圖片上傳到圖床，然后把url寫到數據庫里面，需要的時候直接加載網絡圖片就可以了。

要用到微信的chooseImage和uploadFile兩個API，還有圖床SM.MS提供的API。

首先看微信小程序的官方文檔

調用chooseImage函數成功執行后，會返回本地文件路徑列表tempFilePaths和本地文件列表tempFiles，tempFilePaths是個數組，因為一次性是可以最多上傳9張圖片的。數組里面存的不是本地路徑，是一個臨時的網絡地址（類似於http://tmp//xxx.png），小程序關閉之后就會被銷毀，如果需要以后再次訪問的話，官方文檔建議的是搭配wx.saveFile來把臨時文件保存到本地，這個以后再試驗。

// 處理主頁內容
  pickImage1: function () {
    var that = this
    //微信API選擇圖片
    wx.chooseImage({
      count: 1, 
　　　　// 最多可以選擇的圖片張數，默認9
      sizeType: ['original', 'compressed'], 
      // original 原圖，compressed 壓縮圖，默認二者都有
      sourceType: ['album', 'camera'], 
      // album 從相冊選圖，camera 使用相機，默認二者都有
      success: ret => {
        var filePath = ret.tempFilePaths[0];
        that.setData({
          modelData: {
            src1: filePath
          }
        })
        console.log("圖片臨時網址，小程序關閉后將會被銷毀：");
        console.log(filePath)
        //微信API將圖片上傳到圖床
        //返回網絡地址
      }
    })
  },     

ret=>是ES6的箭頭函數，相當於function(ret)，箭頭函數寫法更簡潔而且不綁定this，詳細信息可以看參考資料。

（看的資料越多越覺得自己菜...）

編譯執行，選擇圖片后可以在控制台看到相關信息：

然后怎么把圖片上傳到服務器，並且把url提交給后台寫進數據庫呢？接下來就要用到wx.uploadFile和SM.MS提供的API了，文檔描述如下：

 

 這些API的請求參數一定要主要和文檔對應上，不要自己瞎寫，話不多說，直接上代碼。

        //微信API將圖片上傳到圖床
        //返回網絡地址
        wx.uploadFile({
          url: 'https://sm.ms/api/upload',
          filePath: filePath,
          name: 'smfile',
          success: res => {
            //逆向轉換JSON字符串后抽取網址
            console.log("圖片上傳成功！")
            console.log(JSON.parse(res.data).data.url)
          }
        })        

這個地方要注意圖床的文檔描述，默認是以JSON字符串形式傳送數據的，如果加上"console.log(res.data)"可以看到原始的傳送數據。

但是一定要注意啊，這個res.data是JSON格式，你想要用res.data.data.url直接提取網址？那真是too young too simple，一定要記得用前兩兩天剛寫過的JSON.parse()轉換成js對象再操作。

今天先寫到這里吧，下午看到一個學習網址還不錯，是FireFox開發者社區的Web學習教程，挺適合我這種菜雞的，也放在參考資料里面了，大家需要的自取哈。

 

參考資料：

箭頭函數

媒體-小程序

Upload API Document

學習 Web 開發