记录在uniapp中如何下载图片到相册

直接上代码 ,this.er2是图片地址

 xiazi() {
      // 触发下载(实际上是保存到相册)
      wx.downloadFile({
        url: this.er2,
        success: function (res) {
          console.log(22, res);
          // tempFilePath可以作为img标签的src属性显示图片
          const tempFilePath = res.tempFilePath;
          wx.saveImageToPhotosAlbum({
            filePath: tempFilePath,
            success(res) {
              wx.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 2000
              });
            }
          });
        }
      });
    },

### 如何在 UniApp 中使用图像组件 #### 图像组件基本属性设置 在 UniApp 开发环境中,`<image>` 组件用于展示图片资源。此组件支持多种属性配置来满足不同需求下的图片显示方式[^3]。 ```html <!-- 基础用法 --> <template> <view class="example"> <!-- 定义一个简单的 image 标签 --> <image src="/static/logo.png" mode="aspectFit"></image> </view> </template> <script> export default { name: "ImageExample" }; </script> <style scoped> .example{ display: flex; justify-content: center; } </style> ``` 上述代码展示了如何加载本地静态文件夹内的图片,并通过 `mode` 属性指定缩放模式为保持宽高比例适应容器大小。 #### 动态绑定图片路径与事件处理 除了直接写死图片链接外,在实际应用中更常见的是动态获取网络地址或用户相册选取后的临时路径作为图片来源。此时可以利用 Vue 的数据双向绑定机制实现这一目的: ```html <template> <view class="dynamic-image-example"> <!-- 使用 v-bind(:src) 实现动态赋值 --> <image :src="imgSrc" @click="handleClick"></image> <!-- 添加按钮触发改变 imgSrc --> <button type="primary" @click="changeImg">更换图片</button> </view> </template> <script> export default { data(){ return { imgSrc: '/static/default.jpg' // 初始默认图片 } }, methods:{ handleClick(event){ console.log('点击了图片', event); }, changeImg(){ this.imgSrc = 'https://example.com/new_image_path'; // 更新图片源 } } }; </script> ``` 这段示例不仅实现了图片的动态切换还加入了交互行为,当用户点击图片时会触发相应的方法记录日志;而按下“更换图片”的按键则能够更新当前显示的内容。 #### 结合云存储服务上传并展示远程图片 对于涉及大量多媒体素材的应用来说,通常会选择将这些资料托管至第三方云端平台以便于管理和分发。下面是一个基于 uniCloud SDK 进行图片上传后再调用 `<image>` 显示的例子[^1]: ```javascript import { uploadFile } from '@cloudbase/js-sdk'; methods: async function () { try { const result = await uploadFile({ cloudPath: `${Date.now()}.png`, filePath: tempFilePath, // 来源于 wx.chooseMedia 或者其他途径获得的临时文件路径 }); if (result.fileID) { this.remoteImageUrl = result.fileID; // 将返回的结果存入data变量供视图层渲染 } } catch (e) { console.error(e.message); } }, ``` 配合之前提到过的 HTML 模板部分即可完成整个流程:选择 -> 上载 -> 渲染新上传成功的远端 URL 下的图片
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值