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

举报
程思扬 发表于 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个月内不可修改。