save-image-to-photos-album.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex:1">
  <!-- #endif -->
    <page-head :title="title"></page-head>
    <view class="uni-padding-wrap">
      <image class="image" src="/static/uni.png"></image>
      <button class="margin-top-10" type="primary" @click="saveImage">将图片保存到手机相册</button>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  export default {
    data() {
      return {
        title: "saveImageToPhotosAlbum"
      }
    },
    methods: {
      saveImage() {
        uni.saveImageToPhotosAlbum({
          filePath: "/static/uni.png",
          success: (res) => {
            console.log("saveImageToPhotosAlbum success", JSON.stringify(res));
            uni.showToast({
              position: "center",
              icon: "none",
              title: "图片保存成功，请到手机相册查看"
            })
          },
          fail: (err) => {
            uni.showModal({
              title: "保存图片到相册失败",
              content: JSON.stringify(err),
              showCancel: false
            });
          }
        })
      }
    }
  }
</script>

<style>
  .margin-top-10 {
    margin-top: 10px;
  }

  .image {
    width: 196px;
    height: 196px;
    align-self: center;
  }
</style>