uniapp 长按图片保存

在uniapp中，你可以使用uni_modules插件中的image-preview组件来实现长按图片保存的功能。具体步骤如下：

1. 安装uni_modules插件

npm install @dcloudio/uni-ui --save

2. 在需要使用的页面中引入image-preview组件

<template>
  <view>
    <image
      src="/static/image.jpg"
      mode="aspectFit"
      @longpress="onLongPress"
    ></image>
  </view>
</template>

<script>
  import imagePreview from "@/uni_modules/@dcloudio/uni-ui/lib/uni-image-preview/uni-image-preview.vue";
  export default {
    components: {
      imagePreview,
    },
    methods: {
      onLongPress(event) {
        const currentSrc = event.currentTarget.dataset.src;
        uni.showActionSheet({
          itemList: ["保存图片"],
          success: (res) => {
            if (res.tapIndex === 0) {
              uni.downloadFile({
                url: currentSrc,
                success: (res) => {
                  uni.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success: () => {
                      uni.showToast({
                        title: "保存成功",
                      });
                    },
                    fail: () => {
                      uni.showToast({
                        title: "保存失败",
                        icon: "none",
                      });
                    },
                  });
                },
                fail: () => {
                  uni.showToast({
                    title: "下载失败",
                    icon: "none",
                  });
                },
              });
            }
          },
        });
      },
    },
  };
</script>

在上述代码中，我们使用了image组件来展示图片，并在其上绑定了longpress事件，当用户长按图片时会触发该事件。在事件处理函数中，我们通过event.currentTarget.dataset.src获取当前图片的地址，并通过uni.showActionSheet方法展示一个操作菜单，当用户选择“保存图片”时，通过uni.downloadFile方法下载图片，并通过uni.saveImageToPhotosAlbum方法将图片保存到相册中。最后，我们使用uni.showToast方法展示保存结果。