详解基于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 相关文章推荐
TopList标签和JavaScript结合两例
Aug 12 Javascript
Jquery 获取checkbox的checked问题
Nov 16 Javascript
js Function类型
Dec 04 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
最简单的tab切换实例代码
May 13 Javascript
基于jquery插件编写countdown计时器
Jun 12 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 Javascript
深入详解JS函数的柯里化
Jun 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更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
Swiper实现轮播图效果
2017/07/03 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
js实现每日签到功能
2018/11/29 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
深入源码解析Python中的对象与类型
2015/12/11 Python
Python探索之ModelForm代码详解
2017/10/26 Python
django定期执行任务(实例讲解)
2017/11/03 Python
python变量命名的7条建议
2019/07/04 Python
python输出决策树图形的例子
2019/08/09 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
安全检查验收制度
2014/01/12 职场文书
高三生物教学反思
2014/01/25 职场文书
销售主管岗位职责范本
2014/02/14 职场文书
前台文员职责范本
2014/03/07 职场文书
幼儿教师培训感言
2014/03/08 职场文书
教师节标语大全
2014/10/07 职场文书
五年级学生评语大全
2014/12/26 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
加班费申请报告
2015/05/15 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书