微信小程序開發(fā)文件上傳功能教程

微信小程序文件上傳或者圖片上傳功能，是非常重要的小程序功能，我們在開發(fā)過程中，使用微信小程序?qū)⑽募ɑ驁D片）保存在本地，這樣可以快速的取到圖片，節(jié)約用戶的流量和時間。以下是微信小程序開發(fā)文件上傳功能教程：

保存圖片，我認為有兩處需要保存 

1、選擇圖片的時候，使用wx.chooseImage選擇圖片的時候保存 

2、下載圖片的時候，使用wx.downloadFile下載圖片的時候保存

代碼片段 

1、選擇圖片的時候

js代碼

frontimage:function(){

var_this=this;

//選擇圖片

wx.chooseImage({

count:1,// 默認9

sizeType:[\'original\',\'compressed\'],// 可以指定是原圖還是壓縮圖，默認二者都有

sourceType:[\'album\',\'camera\'],// 可以指定來源是相冊還是相機，默認二者都有

success:function(res){

// 成功，把url賦值至wxml展示圖片

_this.setData({

FilePaths:res.tempFilePaths

})

// 保存圖片

wx.saveFile({

//之前被這個地址坑了好幾次

tempFilePath:res.tempFilePaths,//這個地址是圖片地址，而不是你保存的目的地址

success:function(res){

console.log(保存圖片成功)

},

fail:function(res){

console.log(保存圖片失敗)

console.log(res)

}

})

}

})

}

2、下載圖片的時候

wx.downloadFile({
              url: res.data.body[0].URL,  //圖片的下載地址
              success: function (res) { //圖片下載成功
                wx.saveFile({
                  tempFilePath: res.tempFilePath, //下載后的圖片臨時地址
                  success: function (res) {
                    console.log(保存圖片成功)
                  },
                  fail: function () {
                    console.log(保存圖片失敗)
                  }
                })
              }, fail: function (res) {
                console.log(圖片下載失敗)
              }
            })

圖片保存成功后，在保存成功的地方將返回的res.savedFilePath（這是成功保存后的保存路徑）放入緩存中，在需要用圖片的時候根據(jù)緩存存的url就可以取到圖片了。

以上是微信小程序開發(fā)文件上傳功能教程，更多關(guān)于微信小程序其他功能開發(fā)，可以關(guān)注本網(wǎng)站，謝謝。

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。更多小程序請查看：小程序商店