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

接下来我将详细讲解如何基于mpvue微信小程序下载远程图片到本地解决思路。

1. 问题背景

在使用mpvue开发微信小程序的过程中，我们经常会遇到下载远程图片到本地的需求。但mpvue的模板语法中并没有提供类似Vue.js的v-html指令，因此出现了不能直接将远程图片显示在页面上的情况。

2. 解决思路

mpvue提供的解决思路是通过wx.downloadFile()接口下载远程图片并保存到本地，然后使用相对路径访问本地图片。

实现该思路需要经历以下几个步骤：

1. 获取原图路径
2. 下载图片文件
3. 保存至本地指定路径
4. 使用相对路径访问本地图片

接下来我们将分别对上述步骤进行详细说明。

2.1 获取原图路径

假设我们需要下载一个远程图片，url为"http://www.example.com/example.jpg"，获取该图片路径的代码如下：

const imgUrl = 'http://www.example.com/example.jpg';

2.2 下载图片文件

下载图片文件使用wx.downloadFile()接口。该接口接受两个参数：图片的远程路径imgUrl和下载后保存的本地路径filePath。

wx.downloadFile({
  url: imgUrl,
  success(res) {
    if (res.statusCode === 200) {
      const filePath = res.tempFilePath;
      console.log(filePath);
    }
  },
  fail(err) {
    console.log(err);
  }
});

2.3 保存至本地指定路径

下载完图片之后，我们需要将其保存到本地。以wx.saveFile()方法为例，该方法接受一个参数（tempFilePath），代表需要存储的临时文件路径。保存成功后，我们可以获取到该文件的本地路径。

wx.saveFile({
  tempFilePath: filePath,
  success(res) {
    const savedFilePath = res.savedFilePath;
    console.log(savedFilePath);
  },
  fail(err) {
    console.log(err);
  }
});

2.4 使用相对路径访问本地图片

最后一步是使用相对路径访问本地图片。我们可以使用相对路径访问本地图片的方法是将图片路径设置为"/images/example.jpg"，其中"/images"是存储图片的目录路径。因为我们在模板中使用vue-loader加载图片时，已将图片路径的前缀设置为"/images"。

<template>
  <img :src="'/images/example.jpg'" />
</tmeplate>

3. 示例说明

下面我们来看两个具体的示例说明。

3.1 下载单张图片

假设我们需要下载一张图片并显示在页面上，在created生命周期中调用下载接口，代码如下：

const imgUrl = 'http://www.example.com/example.jpg';

export default {
  data() {
    return {
      imgPath: ''
    }
  },
  created() {
    wx.downloadFile({
      url: imgUrl,
      success(res) {
        if (res.statusCode === 200) {
          const filePath = res.tempFilePath;
          wx.saveFile({
            tempFilePath: filePath,
            success(res) {
              this.imgPath = res.savedFilePath;
            }
          });
        }
      }
    });
  }
}

然后在模板中使用下面的代码将图片显示在页面上：

<template>
  <img :src="imgPath" />
</tmeplate>

3.2 下载多张图片

如果需要下载多张图片，可以将下载接口封装成一个函数，然后将多个图片地址保存在一个数组中进行遍历。

const imgList = [
  'http://www.example.com/example1.jpg',
  'http://www.example.com/example2.jpg',
  'http://www.example.com/example3.jpg'
];

export default {
  data() {
    return {
      imgPaths: []
    }
  },
  created() {
    for (let i = 0; i < imgList.length; i++) {
      this.downloadImage(imgList[i]);
    }
  },
  methods: {
    downloadImage(imgUrl) {
      wx.downloadFile({
        url: imgUrl,
        success(res) {
          if (res.statusCode === 200) {
            const filePath = res.tempFilePath;
            wx.saveFile({
              tempFilePath: filePath,
              success(res) {
                this.imgPaths.push(res.savedFilePath);
              }
            });
          }
        }
      });
    }
  }
}

然后在模板中使用v-for指令将多张图片显示在页面上：

<template>
  <div v-for="(imgPath,index) in imgPaths" :key="index">
    <img :src="imgPath" />
  </div>
</tmeplate>