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

举报
程思扬 发表于 2022/01/05 15:45:54 2022/01/05
【摘要】 注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 [wx.saveFile](https://developers.weixin.qq.com/miniprogram/dev/api/wx.saveFile.html),才能在小程序下次启动时访问得到。

技术文档

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

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

例子
图片.png

wxml


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 +  '%'


  });


 }


 });


 }


 


 ```
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。