uni-app 点击预览图片长按保存图片到本地

存档备用 =A=

<template>
  <view>
    <view>
      <image
        class="img-style"
        :src="src"
        alt="demoImg"
        @click="previewImg()"
      ></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      src: "/static/logo.png",
    };
  },
  methods: {
    previewImg() {
      uni.previewImage({
        urls: [this.src], //需要预览的图片http链接列表,多张的时候,url直接写在后面就行了
        current: "", // 当前显示图片的http链接,默认是第一个
        success: function (res) {},
        fail: function (res) {},
        complete: function (res) {},
	//长按保存到本地
        longPressActions: {
          itemList: ["保存图片到本地"],
          success: (data) => {
            if (data.tapIndex == 0) {
              let url = this.src;
              uni.saveImageToPhotosAlbum({
                filePath: url,
                success: (res) => {
                  uni.showToast({
                    title: "已存至系统相册",
                    icon: "success",
                  });
                },
                fail: (res) => {
                  uni.showToast({
                    title: "保存失败",
                    icon: "error",
                  });
                },
              });
            }
          },
          fail: function (err) {
            console.log(err.errMsg);
          },
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.img-style {
  margin: 32rpx 0;
  height: 450rpx;
  width: 660rpx;
}
</style>

参考文档:https://uniapp.dcloud.io/api/media/image?id=unipreviewimageobject

posted @ 2021-10-19 11:02  1940  阅读(1174)  评论(0编辑  收藏  举报