小程序圖片下載【實用】

時間 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。