小程序图片下载【实用】

时间 2020-08-22

标签程序图片下载实用繁體版

原文原文链接

如下内容直接放入便可亲测有效

单张下载

<!-- HTML -->
<div @click="saveImage"> 下载图片 </div>

/* methods */
saveImage() {
          wx.downloadFile({
              url:'http://upload.jianshu.io/admin_banners/web_images/4435/c1d3ca63353c8bd527f0d781605516cb5b266d02.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540',

              success: function(res) {
                  if (res.statusCode === 200) {
                      let img = res.tempFilePath;
                      wx.saveImageToPhotosAlbum({
                          filePath: img,
                          success(res) {
                              console.log('成功')
                          },
                          fail(res) {
                              console.log('保存失败')
                          }
                      });
                  }
              }
          });
      }

多张下载

<!-- HTML -->
<div @click="saveImage"> 下载图片 </div>

/* methods */
saveImage() {
          let picArr=['http://upload.jianshu.io/admin_banners/web_images/4435/c1d3ca63353c8bd527f0d781605516cb5b266d02.jpg','http://47.102.105.248:8805/img-api/202007/24/1595585519996221273.png']
          this.xiazaiTupian(picArr)
      },
      //下载内容
      xiazaiTupian: function(picArr,index) {
          let that=this;
          index=index||0;
          console.log(picArr[index])
          wx.downloadFile({
              url: picArr[index],
              success: function (res) {
                  var temp = res.tempFilePath
                  console.log(index)
                  console.log(temp)
                  wx.saveImageToPhotosAlbum({
                      filePath: temp,
                      success: function () {
                          index+=1;
                          if (index < picArr.length){
                              that.xiazaiTupian(picArr, index);
                          }else{
                              wx.showToast({
                                  title: '下载完成',
                              })
                          }

                      },
                      fail: function () {
                          index += 1;
                          if (index < picArr.length) {
                              that.xiazaiTupian(picArr, index);
                          } else {
                              wx.showToast({
                                  title: '下载完成',
                              })
                          }
                          wx.showToast({
                              title: '第' + (index+1) + '下载失败',
                          })
                      }
                  })
              },
              fail: function (res) {
                  wx.showToast({
                      title: '下载失败',
                  })
              }
          })

      },

多图下载（视频下载） -- 小程序(mpvue)内嵌h5

<!-- h5 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
</head>
<body>

    <div onclick="aaaaa()">大师傅可是</div>
</body>
</html>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
    let aaaaa = function(){
        wx.miniProgram.redirectTo({ url: '/pages/webseed/main?url='+window.location.href })
        wx.miniProgram.postMessage({ data: [
                "https://api.nhbgxx.com/storage/images/2020/07/15/5f0ef08737650.png",
                'https://api.nhbgxx.com/storage/images/2020/07/14/5f0d5739e5b49.jpg'
            ]
        })
    }
</script>

<!-- mpvue -->
<template>
  <div style="height: 100vh; overflow: scroll;" v-if="weburl">
    <web-view :src="weburl" @message="saveImg" />
  </div>
</template>
<script>
  export default {
    data () {
      return {
        weburl: 'http://47.102.105.248:8805/html/my.html',
        imgUrl: []
      }
    },

    mounted(){
      if(this.getQuery().url){
        this.weburl = this.getQuery().url;
      }else{
        this.weburl = 'http://47.102.105.248:8805/html/my.html';
      }
    },
    methods: {
      saveImg:function(data){
        this.imgUrl = data.target.data[0]
        let that = this;

        //获取相册受权
        wx.getSetting({
          success(res) {
            if (!res.authSetting['scope.writePhotosAlbum']) {
              wx.authorize({
                scope: 'scope.writePhotosAlbum',
                success() {
                  //这里是用户赞成受权后的回调
                  that.saveImgToLocal();
                },
                fail() {//这里是用户拒绝受权后的回调

                }
              })
            } else {//用户已经受权过了
              that.saveImgToLocal();
            }
          }
        })

      },
      saveImgToLocal: function (e) {
        let that = this;

        let imgSrc = that.imgUrl;
        for(let i in imgSrc){
          wx.downloadFile({
            url: imgSrc[i],
            success: function (res) {
              console.log(res);
              //图片保存到本地
              wx.saveImageToPhotosAlbum({
                  filePath: res.tempFilePath,
                  success: function (data) {
                      wx.showToast({
                          title: '保存成功',
                          icon: 'success',
                          duration: 2000
                      })
                  },
              }),
              // 保存视频
              wx.saveVideoToPhotosAlbum({
                  filePath: res.tempFilePath,
                  success: function (data) {
                      wx.showToast({
                          title: '保存成功',
                          icon: 'success',
                          duration: 2000
                      })
                  },
              })

            }
          })
        }

      },
      getQuery() {
        /* 获取当前路由栈数组 */
        const pages = getCurrentPages()
        const currentPage = pages[pages.length - 1]
        const options = currentPage.options
        return options
      },
    }

  }
</script>