uniapp保存图片到相册demo效果(整理)

简介: uniapp保存图片到相册demo效果(整理)

<template>
  <view class="demoPage">
    <view @click="saveImg">保存至相册</view>
  </view>
</template>
<script>
  export default {
    components: {},
    data() {
      return {
        url: 'http://img.touxiangwu.com/2020/3/uq6Bja.jpg', //图片
      }
    },
    // 侦听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 页面加载
    onLoad(e) {
    },
    // 页面显示
    onShow() {
    },
    // 方法
    methods: {
      saveImg() {
        let that = this;
        // 向用户发起授权请求
        uni.authorize({
          scope: 'scope.writePhotosAlbum',
          success: () => {
            // 已授权
            that.downImg();
          },
          fail: () => {
            // 拒绝授权,获取当前设置
            uni.getSetting({
              success: (result) => {
                if (!result.authSetting['scope.writePhotosAlbum']) {
                  that.isAuth()
                }
              }
            });
          }
        })
      },
      //下载
      downImg() {
        uni.showLoading({
          title: '加载中'
        });
        uni.downloadFile({
          url: this.urlImg,
          success: (res) => {
            uni.hideLoading();
            if (res.statusCode === 200) {
              uni.saveImageToPhotosAlbum({
                filePath: that.url, //图片地址url
                success: function() {
                  uni.showToast({
                    title: "保存成功",
                    icon: "none"
                  });
                },
                fail: function() {
                  uni.showToast({
                    title: "保存失败,请稍后重试",
                    icon: "none"
                  });
                }
              });
            }
          },
          fail: (err) => {
            uni.showToast({
              title: "失败啦",
              icon: "none"
            });
          }
        })
      },
      /*
       * 引导用户开启权限
       */
      isAuth() {
        uni.showModal({
          content: '由于您还没有允许保存图片到您相册里,无法进行保存,请点击确定允许授权',
          success: (res) => {
            if (res.confirm) {
              uni.openSetting({
                success: (result) => {
                  console.log(result);
                }
              });
            }
          }
        });
      },
    },
    // 页面隐藏
    onHide() {
    },
    // 页面卸载
    onUnload() {
    },
    // 触发下拉刷新
    onPullDownRefresh() {
    },
    // 页面上拉触底事件的处理函数
    onReachBottom() {
    },
  }
</script>
相关文章
|
4月前
|
小程序 搜索推荐
uniapp中如何使用image图片
uniapp中如何使用image图片
517 0
|
8月前
|
小程序
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
uniapp picker实现选择年月demo效果(整理)
uniapp picker实现选择年月demo效果(整理)
|
3月前
|
开发框架 JavaScript 小程序
uniapp、vue、小程序、js图片转base64 示例代码
uniapp、vue、小程序、js图片转base64 示例代码
|
6月前
|
前端开发 JavaScript API
uniapp上传二进制图片
uniapp上传二进制图片
91 1
|
6月前
|
前端开发 JavaScript
uniapp上传图片至服务器,获得在线图片链接预览(实战)
uniapp上传图片至服务器,获得在线图片链接预览(实战)
276 0
|
6月前
uniapp图片弹框效果
uniapp图片弹框效果
38 1
|
6月前
|
移动开发 小程序 Android开发
uniapp使用webview将页面转换成图片支持h5、app、小程序
uniapp使用webview将页面转换成图片支持h5、app、小程序
|
8月前
|
小程序
uniapp授权小程序隐私弹窗效果demo(整理)
uniapp授权小程序隐私弹窗效果demo(整理)
uniapp选择只选择月份demo效果(整理)
uniapp选择只选择月份demo效果(整理)

热门文章

最新文章