微信小程序開發(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步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。更多小程序請查看:小程序商店