uni-app-customImg 下载组件

您可以使用uni-app中uni-download组件来实现下载图片功能。uni-download组件是下载文件的通用组件，可以下载任何类型的文件，包括图片文件。以下是一个简单的示例，演示如何使用uni-download组件来下载图片：

<template>
  <view>
    <image :src="imgUrl"></image>
    <button @click="downloadImg">下载图片</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: 'https://example.com/image.png'
    }
  },
  methods: {
    downloadImg() {
      uni.downloadFile({
        url: this.imgUrl,
        success: (res) => {
          if (res.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => {
                uni.showToast({
                  title: '保存成功'
                })
              },
              fail: () => {
                uni.showToast({
                  title: '保存失败',
                  icon: 'none'
                })
              }
            })
          } else {
            uni.showToast({
              title: '下载失败',
              icon: 'none'
            })
          }
        },
        fail: () => {
          uni.showToast({
            title: '下载失败',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

在上述代码中，我们首先在data中声明了一个imgUrl变量，用于存储图片的地址。然后，在页面中展示该图片，并在按钮的点击事件中调用downloadImg方法来触发下载操作。在downloadImg方法中，我们使用uni.downloadFile来下载图片，并在下载完成后使用uni.saveImageToPhotosAlbum来保存图片到相册中。

请注意，为了使uni.downloadFile能够下载图片文件，必须在manifest.json文件中配置网络权限。您可以在manifest.json中添加以下代码：

{
  "permission": {
    "scope.userLocation": {
      "desc": "获取用户位置信息"
    },
    "scope.writePhotosAlbum": {
      "desc": "保存图片到相册"
    },
    "scope.record": {
      "desc": "麦克风"
    },
    "scope.camera": {
      "desc": "摄像头"
    },
    "scope.album": {
      "desc": "相册"
    },
    "scope.userInfo": {
      "desc": "用户信息"
    },
    "scope.userLocationBackground": {
      "desc": "后台定位"
    },
    "scope.werun": {
      "desc": "微信运动步数"
    },
    "scope.writeVideo": {
      "desc": "保存视频到相册"
    },
    "scope.cameraRecord": {
      "desc": "拍摄小视频"
    },
    "scope.invoice": {
      "desc": "获取发票"
    },
    "scope.invoiceTitle": {
      "desc": "获取发票抬头"
    },
    "scope.address": {
      "desc": "获取通讯地址"
    },
    "scope.recordPreset": {
      "desc": "前置摄像头"
    },
    "scope.writeContacts": {
      "desc": "通讯录"
    },
    "scope.readSMS": {
      "desc": "短信"
    },
    "scope.sensor": {
      "desc": "传感器"
    },
    "scope.location": {
      "desc": "地理位置"
    },
    "scope.phone": {
      "desc": "拨打电话"
    },
    "scope.microphone": {
      "desc": "麦克风"
    },
    "scope.notification": {
      "desc": "通知"
    },
    "scope.cameraAlbum": {
      "desc": "拍照"
    },
    "scope.calendar": {
      "desc": "日历"
    },
    "scope.appointment": {
      "desc": "约会"
    },
    "scope.reminder": {
      "desc": "提醒"
    },
    "scope.bluetooth": {
      "desc": "蓝牙"
    },
    "scope.chooseAddress": {
      "desc": "选择收货地址"
    },
    "scope.addressBook": {
      "desc": "通讯录"
    },
    "scope.locationBackground": {
      "desc": "后台定位"
    }
  }
}

在上述代码中，我们添加了"scope.writePhotosAlbum"权限，以允许应用程序保存图片到用户的相册中。