小編給大家分享一下基于mpvue微信小程序下載遠(yuǎn)程圖片到本地的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)長期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為和布克賽爾蒙古企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計、成都網(wǎng)站制作，和布克賽爾蒙古網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

效果

流程梳理

獲取圖片遠(yuǎn)程地址數(shù)組-->遍歷拿到圖片緩存（臨時地址）(wx.getImageInfo)-->保存緩存圖片到本地（wx.saveImageToPhotosAlbum）

完整代碼

子組件代碼邏輯

//子組件download-file.vue

在父組件中引用

//news/detail.vue
//省略代碼...
下載
//省略代碼...

//省略代碼...
async download() {
  let vm = this;
  const temp = [];
  let data = await vm.$net.get(vm.$apis.articleDetails, {
    id: vm.item.id
  });
  if (data.article.body.length > 0) {
   data.article.body.map((item, index) => {
    if (item.type == "img") {
     temp.push(item.data);
    }
  });
 }
 vm.downLoadUrls = temp;
},

看完了這篇文章，相信你對“基于mpvue微信小程序下載遠(yuǎn)程圖片到本地的示例分析”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！