微信小程序----图片点击放大展示(以及下载本地功能)

发布于:2025-02-22 ⋅ 阅读:(149) ⋅ 点赞:(0)

wxml:

  <view class="bot_fle" wx:for="{{fileList}}" wx:key="index" wx:if="{{file==1}}" >
    <view style="width: 70%;" wx:if="{{item.fileSuffix != '.jpg' && item.fileSuffix != '.png'&& item.fileSuffix != '.jpeg'}}" bind:tap="tapOpenFile" data-index="{{index}}" data-url="{{item.url}}">{{item.originalName}}</view>
    <view style="width: 200rpx;" wx:if="{{item.fileSuffix == '.jpg' || item.fileSuffix == '.png' || item.fileSuffix == '.jpeg'}}" bind:tap="tapPreviewImage" data-index="{{index}}" data-url="{{item.url}}">
      <image src="{{item.url}}" mode="widthFix" style="width: 100%;" />
    </view>
    <view class="botf_ri">
      <button type="primary" bindtap="downFile" data-index="{{index}}" data-url="{{item.url}}" size="mini">下载</button>
    </view>
  </view>

js文件(点击放大):

  tapPreviewImage(e) {
  		let url = e.currentTarget.dataset.url
  		wx.previewImage({
  			urls: [url],
  			current: url
  		})
  	},
  	tapOpenFile(e) {
  		let url = e.currentTarget.dataset.url
  		wx.downloadFile({
  			url: url,
  			success: function(res) {
  				const filePath = res.tempFilePath
  				wx.openDocument({
  					filePath: filePath,
  					success: function(res) {
  						console.log('打开文档成功')
  					}
  				})
  			}
  		})
  	},

js(下载功能):

  downFile(e) {
    var url = e.currentTarget.dataset.url;
    //下载文件,生成临时地址
    wx.downloadFile({
      url: url,
      success(res) {
        //保存到本地
        wx.getFileSystemManager().saveFile({
          tempFilePath: res.tempFilePath,
          success: function (res) {
            const savedFilePath = res.savedFilePath;
            // 打开文件
            wx.openDocument({
              filePath: savedFilePath,
              success: function (res) {
                console.log('打开文档成功')
              },
            });
          },
          fail: function (err) {
            console.log('保存失败:', err)
          }
        });
      }
    })
  },

网站公告

今日签到

点亮在社区的每一天
去签到