微信小程序--uploadFile上傳圖片及踩坑

判斷后台獲取有沒有用戶頭像

<view bindtap="uploadImage"  class="vieimg">
    <image wx:if="{{UserImg}}" src="{{UserImg}}"></image>
    <image wx:else src="/images/icon-boy.png"></image>
</view>

微信開發者工具有上傳文件的方法

方法 wx.chooseImage 里邊的參數有 count 為最多可已選擇的圖片總數，sizeType 指定原圖還是壓縮圖片，默認是二者都有，sourceType 指定來源是相冊還是相機，默認二者都有。代碼如下：

wx.chooseImage({
    count: 1,
    sizeType: ['compressed'], 
    sourceType: ['album', 'camera'], 
    success: function (res) {
        var tempFilePaths = res.tempFilePaths;
        wx.getFileSystemManager().readFile({
            filePath: tempFilePaths[0],
            encoding: 'base64',
            success: function(res) {
                var base64Img = 'data:image/png;base64,' + wx.arrayBufferToBase64(base)
                that.setData({
                    UserImg : tempFilePaths[0] //創建一個object URL，並不是你的本地路徑
                })
            }
        })
    },
    fail: function (res) {}
})

wx.getFileSystemManager().readFile({}) 將獲取到的圖片文件轉為base64

之前一直疑惑把圖片存儲到數據庫中，怎么返回一個名稱並且通過這個名稱到文件中查找，后來發現C#中有接收文件的方法，可以到我上個隨筆中看看 ➡️ C#接收前端上傳圖片 。

接着繼續上傳到后端，微信小程序給出了一個上傳文件的方法wx.uploadFile({}}) 里邊的參數和平常使用的有些出入

wx.uploadFile({ 
    url: url,//接口地址
    name: 'uploadfile_ant',//文件類型
    filePath: tempFilePaths[0],//為文件地址
    formData: {   //其他要傳輸給后端的數據，在這里不用傳文件
        'id':UserImgid
    },
    success: function (res) {
        if(res.data==""){
            wx.showModal({
                title: '提示',
                content: "圖片上傳類型錯誤，當前支持jpg、png、bmp、jpeg、gif",
                showCancel: false
            });
        }
        //可以把后端傳過來的已經成功的圖片顯示在頁面上，注意url為你后端的文件存放地址
        that.setData({
            'UserImg': url+res.data.UserImg
        })
        wx.setStorageSync('UserImg', url+res.data.UserImg);
    },
    fail: function (res) {
        wx.showModal({
            title: '錯誤提示',
            content: "錯誤",
            showCancel: false,
            success: function (res) { }
        })
    }
})

踩坑：測試和本地調試都可以，發布后在手機上就不行,解決方法：

注意 wx.uploadFile 方法在發布前要在 微信小程序開發平台 頁面配置，
在開發者工具里邊

到這里基本上就結束了。😄​ ，有什么其他想法或問題的可以留言