快捷導(dǎo)航

詳解基于mpvue微信小程序下載遠(yuǎn)程圖片到本地解決思路

更新時(shí)間：2019年05月16日 14:22:44 作者：hurely

這篇文章主要介紹了詳解基于mpvue微信小程序下載遠(yuǎn)程圖片到本地解決思路，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

說(shuō)明

最近有些空余時(shí)間開(kāi)始著手優(yōu)化我那個(gè)吉他自學(xué)小助手的微信小程序，其中有一個(gè)功能是下載吉他譜到本地，開(kāi)始以為只是很簡(jiǎn)單的拿到圖片url然后down下來(lái)就好了，其實(shí)不然...最終通過(guò)google解決了這個(gè)問(wèn)題，現(xiàn)在記錄一下，以便后續(xù)翻閱。

少?gòu)U話先看東西

演示.gif

流程梳理

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

完整代碼

子組件代碼邏輯

//子組件download-file.vue
<template>
 <div></div>
</template>

<script>
export default {
 props: {
  urls: {
   default: ""http://通過(guò)父組件傳遞遠(yuǎn)程圖片路徑數(shù)組
  }
 },
 watch: {
  urls() {
   if (this.urls.length > 0) {
    this.downLoadImage(this.urls);//監(jiān)聽(tīng)變化
   }
  }
 },
 methods: {
  //拿到圖片的臨時(shí)路徑
  getImageInfo(url) {
   var cache = {};
   return new Promise((resolve, reject) => {
    /* 獲得要在畫(huà)布上繪制的圖片 */
    if (cache[url]) {
     resolve(cache[url]);
    } else {
     const objExp = new RegExp(
      /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/
     );
     if (objExp.test(url)) {
      wx.getImageInfo({
       src: url,
       complete: res => {
        if (res.errMsg === "getImageInfo:ok") {
         cache[url] = res.path;
         resolve(res.path);
        } else {
         reject(new Error("getImageInfo fail"));
        }
       }
      });
     } else {
      this.cache[url] = url;
      resolve(url);
     }
    }
   });
  },
  downLoadImage(urls) {
   const vm = this;
   let temp = [];
   if (urls.length > 0) {
    urls.map((item, index) => {
     vm.getImageInfo(item).then(res => {
      temp.push(res);
      vm.saveImageToLocal(res);
     });
    });
   }
  },
  saveImageToLocal(path) {
   //保存臨時(shí)圖片到本地
   wx.saveImageToPhotosAlbum({
    filePath: path,
    success(res) {
     console.log("success");
    },
    fail: function(res) {
     console.log(res);
    }
   });
  }
 }
};
</script>

<style>
</style>

在父組件中引用

//news/detail.vue
//省略代碼...
<button @click="download">下載</button>
//省略代碼...
<download-file :urls="downLoadUrls" ref="myDownload"></download-file>
//省略代碼...
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;
},

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: