详解基于mpvue微信小程序下载远程图片到本地解决思路


Posted in Javascript onMay 16, 2019

说明

最近有些空余时间开始着手优化我那个吉他自学小助手的微信小程序,其中有一个功能是下载吉他谱到本地,开始以为只是很简单的拿到图片url然后down下来就好了,其实不然...最终通过google解决了这个问题,现在记录一下,以便后续翻阅。

少废话先看东西

详解基于mpvue微信小程序下载远程图片到本地解决思路

演示.gif

流程梳理

获取图片远程地址数组-->遍历拿到图片缓存(临时地址)(wx.getImageInfo)-->保存缓存图片到本地(wx.saveImageToPhotosAlbum)

完整代码

子组件代码逻辑

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

<script>
export default {
 props: {
  urls: {
   default: ""//通过父组件传递远程图片路径数组
  }
 },
 watch: {
  urls() {
   if (this.urls.length > 0) {
    this.downLoadImage(this.urls);//监听变化
   }
  }
 },
 methods: {
  //拿到图片的临时路径
  getImageInfo(url) {
   var cache = {};
   return new Promise((resolve, reject) => {
    /* 获得要在画布上绘制的图片 */
    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) {
   //保存临时图片到本地
   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;
},

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
测试JavaScript字符串处理性能的代码
Dec 07 Javascript
jquery CSS选择器笔记
Mar 29 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
第六篇Bootstrap表格样式介绍
Jun 21 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
Django模板继承 extend标签实例代码详解
May 16 #Javascript
vue视图不更新情况详解
May 16 #Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 #Javascript
Vue中props的详解
May 16 #Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 #Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 #Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 #Javascript
You might like
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
PHP简单判断手机设备的方法
2016/08/23 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
jQuery参数列表集合
2011/04/06 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
Python中使用动态变量名的方法
2014/05/06 Python
Djang中静态文件配置方法
2015/07/30 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
python返回数组的索引实例
2019/11/28 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
python能自学吗
2020/06/18 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
如何查看python关键字
2021/01/17 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
介绍下Java中==和equals的区别
2013/09/01 面试题
安全口号大全
2014/06/21 职场文书
国际贸易实训报告
2014/11/05 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
教师远程培训心得体会
2016/01/09 职场文书
用JS实现飞机大战小游戏
2021/06/09 Javascript
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers