快捷導航

uni-app圖片預覽及長按保存功能實現(xiàn)(超實用！)

更新時間：2026年02月11日 09:07:50 作者：漁_

這篇文章主要介紹了uni-app圖片預覽及長按保存功能實現(xiàn)的相關(guān)資料,通過一行代碼即可實現(xiàn)圖片預覽,長按圖片還能保存到相冊,文中給出了詳細的代碼示例,需要的朋友可以參考下

實現(xiàn)代碼

html

預覽

<!-- template 里寫圖片列表 -->
<view class="img-list">
  <image 
    v-for="(item, index) in imgList" 
    :key="index"
    :src="item" 
    class="img-item"
    @click="previewImg(index)"
  ></image>
</view>

javascript

運行

export default {
  data() {
    return {
      // 圖片列表，換成你的圖片地址
      imgList: [
        "https://xxx.com/img1.jpg",
        "https://xxx.com/img2.jpg",
        "https://xxx.com/img3.jpg"
      ]
    };
  },
  methods: {
    // 預覽圖片
    previewImg(current) {
      uni.previewImage({
        current: current, // 當前點擊的圖片索引
        urls: this.imgList, // 所有要預覽的圖片列表
        longPressActions: {
          // 長按顯示的操作菜單
          itemList: ["保存圖片", "分享圖片"],
          success: (res) => {
            if (res.tapIndex === 0) {
              // 點擊保存圖片
              this.saveImg(this.imgList[current]);
            }
          }
        }
      });
    },
    // 保存圖片到相冊
    saveImg(imgUrl) {
      uni.saveImageToPhotosAlbum({
        filePath: imgUrl,
        success: () => {
          uni.showToast({
            title: "保存成功",
            icon: "success"
          });
        },
        fail: (err) => {
          // 用戶拒絕授權(quán)時提示
          if (err.errMsg.includes("auth deny")) {
            uni.showToast({
              title: "請開啟保存圖片權(quán)限",
              icon: "none"
            });
          }
        }
      });
    }
  }
};

加個簡單樣式

css

.img-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  padding: 20rpx;
}
.img-item {
  width: 30%;
  height: 200rpx;
  border-radius: 8rpx;
}

?? 權(quán)限提醒：保存圖片需要用戶授權(quán)，第一次點擊會彈出授權(quán)提示，記得引導用戶允許！