微信小程序uni.downloadFile保存圖片到本地相冊

 

<template>
  <view class="black">
    <image class="localimg" mode="widthFix" :src="localimg" @longpress="operator"></image>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        localimg: ''
      };
    },
    // 其他頁面傳參
    onLoad() {
      this.localimg = 'https://bkimg.cdn.bcebos.com/pic/fc1f4134970a304e023b1783dcc8a786c9175ca9?x-bce-process=image/resize,m_lfit,w_500,h_500,limit_1';
    },
    methods: {
      operator() {
        uni.showActionSheet({
          itemList: ["保存圖片到本地"],
          success:(res)=> {
            // 1 保存
            if (res.tapIndex == 0) {
              uni.showLoading({
                title: "圖片保存中..."
              })

              // 2 下載
              uni.downloadFile({
                url: this.localimg,
                success:(result)=> {
                  var tempFilePath = result.tempFilePath;
                  
                  // 3 存到本地
                  uni.saveImageToPhotosAlbum({
                    filePath: tempFilePath,
                    success:()=> {
                      uni.showToast({
                        title: "保存成功",
                        duration: 2000
                      })
                    },
                    fail:()=>{
                      // 4 不管成功失敗都關閉提示信息！！！
                      console.log("saveImageToPhotosAlbum 失敗");
                      uni.hideLoading();
                    }
                  })
                },
                fail:()=> {
                  console.log("downloadFile 失敗");
                }
              })
            }
          },
          fail:()=> {
            console.log("showActionSheet 失敗");
          }
        })
      }
    }
  }
</script>
 
<style scoped>
  .black {
    width: auto;
    height: 100%;
    padding:50rpx;
  }
</style>