小程序 - 详解下载功能加图片下载且显示进度

技术文档

下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。使用前请先阅读官方说明

image.png

注：文件的临时路径，在小程序本次启动期间可以正常使用，如需持久保存，需在主动调用 wx.saveFile，才能在小程序下次启动时访问得到。

image.png

例子

wxml

image.png

downImg:  function(e)  {
 var _this =  this;
 // 获取图片地址(http://www.playsort.cn/...)
  var img = e.currentTarget.dataset.src;
 // 下载监听进度
  const downloadTask = wx.downloadFile({
   url: img,
   success:  function(res)  {
  // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容

  console.log(res)
 if  (res.statusCode ==  200)  {
   wx.saveImageToPhotosAlbum({
   filePath: res.tempFilePath,
  success:  function(res)  {
 wx.showToast({
   title:  '保存图片成功!~',
    });
  },
fail:  function(res)  {
 wx.showToast({
title:  '保存图片失败!~',
    });
  }
   })
}  }
  });
downloadTask.onProgressUpdate((res)  =>  {
 if  (res.progress ===  100)  {
 this.setData({
progress:  ''
});
 }  else  {
 this.setData({
 progress: res.progress +  '%'
  });
 }
 });
 }