微信小程序圖片上傳全面解析

一、微信小程序圖片上傳不了

當用戶使用微信小程序上傳圖片時，可能會遇到圖片無法上傳的情況。這種情況一般有以下幾種可能：

1、網絡問題：在網絡狀況較差的情況下，圖片上傳可能會超時失敗或者上傳的速度過慢。

2、圖片格式問題：微信小程序只支持上傳jpg、png、gif格式的圖片，如果上傳非這三種格式的圖片將會失敗。

3、大小限制：微信小程序對圖片的大小有限制，單張圖片不能超過 2M。

二、微信小程序上傳圖片功能

微信小程序提供的上傳圖片的API是wx.chooseImage，具體方法如下：

wx.chooseImage({
  count: 1, // 最多可以選擇的圖片張數
  sizeType: ['original', 'compressed'], // 所選的圖片的尺寸
  sourceType: ['album', 'camera'], // 圖片的來源，默認為相冊
  success: function (res) {
    // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標籤的src屬性顯示圖片
    var tempFilePaths = res.tempFilePaths
  }
})

用戶在點擊上傳圖片按鈕後，會彈出系統的選擇圖片界面，用戶選擇完圖片後可以獲取到tempFilePaths，然後可以通過wx.uploadFile將圖片上傳到服務器端。

三、微信小程序圖片上傳並展示

當圖片上傳成功後，我們需要展示上傳後的圖片，可以通過以下方式實現：

wx.uploadFile({
  url: 'url', // 服務器地址
  filePath: tempFilePaths[0], // 要上傳文件資源的路徑
  name: 'file', // 文件對應的 key , 開發者在服務端可以通過這個 key 獲取文件的二進制內容
  success: function (res) {
    var data = JSON.parse(res.data)
    var imageUrl = data.imageUrl
    // 在前端將imageUrl動態綁定到img標籤的src屬性上
  }
})

我們需要將服務器的圖片路徑保存下來，然後將imageUrl動態綁定到img標籤的src屬性上即可實現圖片上傳並展示。

四、微信小程序圖片上傳大小限制

當用戶上傳的圖片大小超過微信小程序的大小限制時，上傳操作將會失敗。在上傳圖片前我們可以通過以下代碼進行圖片大小的限制：

wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success: function (res) {
    wx.getFileInfo({
      filePath: res.tempFilePaths[0],
      success: function (info) {
        var size = info.size;
        if (size > 2 * 1024 * 1024 ) { // 判斷圖片大小是否超過2M
          wx.showToast({
            title: '圖片不能超過2M',
            icon: 'none',
            duration: 2000
          })
          return;
        }
        // 圖片上傳代碼
      }
    })
  }
})

五、微信小程序圖片上傳壓縮

當用戶選擇的圖片過大時，可以通過對圖片進行壓縮來減小圖片的大小，從而加快圖片上傳的速度。在微信小程序中可以藉助第三方庫wximagecompressor.js來實現圖片的壓縮，操作步驟如下：

1、首先在小程序根目錄下新建一個名為utils的文件夾，然後在該文件夾下創建wximagecompressor.js文件，將第三方庫wximagecompressor.js的代碼粘貼到該文件中。

2、在需要壓縮圖片的頁面引入wximagecompressor.js庫：

var wxImageCompressor = require('../../utils/wximagecompressor.js')

3、在頁面中調用wxImageCompressor接口對圖片進行壓縮：

wx.chooseImage({
  success: function (res) {
    wxImageCompressor.compress(res.tempFilePaths[0], 80, function(result){
        // 圖片上傳代碼
    });
  }
})

其中，compress方法的第一個參數是需要壓縮的圖片路徑，第二個參數是壓縮質量，取值範圍為0 ~ 100。

六、微信小程序圖片上傳失敗

當圖片上傳失敗時，應該對失敗原因進行診斷，可能的原因如下：

1、網絡問題: 在網絡狀況較差或者上傳圖片的文件較大的情況下，可能會導致上傳失敗。

2、服務器問題: 服務器可能存在故障，或者服務器接口存在問題。

3、文件格式問題: 確保上傳的文件符合文件上傳格式的要求，例如類型和大小限制等。

當遇到這些問題，我們應該及時拋出提示信息，並通過排查問題所在，儘快解決。

七、微信小程序圖片上傳不了怎麼回事

當圖片上傳出現問題時，可以通過以下方式進行問題排查：

1、查看控制台的日誌輸出信息，檢查上傳過程中是否存在問題。

2、檢查上傳的圖片路徑是否正確。

3、檢查接口返回的數據是否符合預期。

4、檢查網絡連接是否存在問題。

5、檢查服務器端的代碼是否存在問題。

八、微信小程序圖片上傳優化

為了提高用戶體驗，可以通過以下方式進行微信小程序圖片上傳的優化：

1、對於圖片上傳時間較長的情況，可以使用loading動畫提示用戶當前任務正在處理中。

2、在用戶選擇圖片之後，可以對圖片進行壓縮，減小圖片體積，提高圖片上傳速度。

3、可以在圖片上傳完成之後對上傳的結果進行校驗，顯示上傳結果或者重新上傳。

4、對於用戶上傳的過大的圖片，可以在前端進行保存壓縮後再上傳。

5、在網絡狀況較差的情況下，可以採取斷點續傳等策略，提高上傳成功率。