uniapp开发微信小程序保存图片或视频到本地相册（手指放大）

点击图片或视频进入的预览页面

数据结构,例：
list ：[{
	url: '/image/plus.png',
	type: 1,
}, {
	url: '/video/plus.mp4',
	type: 2,
}]

<template>
  <view class="w-full h-screen flex flex-col bg-black relative">
    <swiper class="w-full h-screen" :current="current" @change="change">
      <swiper-item v-for="(item, index) in list" :key="index">
        <movable-area v-if="Number(item.type) === 1" scale-area class="w-full h-full">
          <movable-view class="w-full h-full" direction="all" scale="true" scale-min="1" scale-max="4" :scale-value="scale" @dblclick="dblclick">
            <image v-if="item.url" :src="imgJoin(item.url)" class="w-full h-full" mode="aspectFit" show-menu-by-longpress @click="back" />
            <image v-if="item.content" :src="imgJoin(item.content)" class="w-full h-full" mode="aspectFit" show-menu-by-longpress @click="back" />
          </movable-view>
        </movable-area>
        <template v-if="Number(item.type) === 2">
          <video v-if="item.content" :src="imgJoin(item.content)" class="w-full h-full"></video>
          <video v-if="item.url" :src="imgJoin(item.url)" class="w-full h-full"></video>
        </template>
      </swiper-item>
    </swiper>
    <view class="text-white fixed bottom-80 left-0 px-4 py-2 box-border w-full flex justify-between items-center text-base">
      <view class="">{{ Number(current) + 1 }}/{{ list.length || 0 }}</view>
      <view v-if="list[current]" @click.stop="onStartDownload">{{ Number(list[current].type) === 1 ? '长按图片保存' : '点击保存' }}</view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {
  },
  data() {
    return {
      scale: 1, // 放大缩小倍数
      current: 1, // swiper当前index
      list: [],
    }
  },
  computed: {},
  watch: {},
  onLoad(options) {
    console.log('options', options)
    this.current = options ? options.index : 0
    this.list = JSON.parse(JSON.stringify(this.$store.state.previewList))
    uni.hideHomeButton()
  },
  onShow() {},
  methods: {
    change(e) {
      this.current = e.detail.current
    },
    dblclick() {
      if (this.scale === 10) {
        this.scale = 1
      } else {
        this.scale = 10
      }
    },
    back() {
      uni.navigateBack()
    },
    // 下载视频到本地
    downVideo() {
      const data = this.list[this.current]
      if (Number(data.type) !== 2) return
      uni.showLoading()
      uni.downloadFile({
        url: this.imgJoin(data.url),
        timeout: 30000,
        header: {
          "Content-Type": "video/mp4"
        },
        success: res => {
          uni.saveVideoToPhotosAlbum({
            filePath: res.tempFilePath,
            success: res => {
              uni.hideLoading()
              uni.showToast({
                title: "保存成功",
                duration: 2000,
              })
            }
          })
        },
        fail() {
          uni.hideLoading()
        }
      })
      uni.hideLoading()
    },
    onStartDownload() {
      wx.getSetting({
        success: (res) => {
          if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
            wx.authorize({
              scope: 'scope.writePhotosAlbum',
              success: () => {
                this.downVideo()
              },
              fail: (err) => {
                console.log('授权失败:', err)
              }
            })
          } else if (!res.authSetting['scope.writePhotosAlbum']) {
            wx.openSetting({
              success: (res) => {
                if (res.authSetting['scope.writePhotosAlbum']) {
                  this.downVideo()
                }
              }
            })
          } else {
            this.downVideo()
          }
        }
      })
    },
    save() {
      // #ifdef MP-WEIXIN
      // uni.chooseImage({
      //   count: 1,
      //   sourceType: ['camera'],
      //   success: function(res) {
      //     uni.saveImageToPhotosAlbum({
      //       filePath: this.imgJoin(this.list[this.current - 1].url),
      //       success: res => {
      //         uni.showToast({
      //           title: '保存成功',
      //           icon: 'success',
      //           duration: 2000
      //         })
      //       },
      //       fail: err => {
      //         uni.showToast({
      //           title: '保存失败',
      //           icon: 'none',
      //           duration: 2000
      //         })
      //       }
      //     })
      //   },
      // })
      // #endif
    },
  },
}
</script>

<style lang="scss" scoped></style>