当前位置：首页 > article >正文

微信小程序自定义图片预览操作按钮(解决api预览时不能删除提交服务器等自定义操作)

article 2024/11/23 12:20:01

概述：

本人在做图片预览的时候，希望能够根据预览的情况，实时删除操作。
微信小程序提供的api函数：wx.previewImage，官方说明：https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html，只有预览多个图片，识别码，供我们操作的地方非常有限。
本文描述的怎么自己实现预览，然后能自定义自己的操作按钮。

原理描述：

需要预览某图片，把这个图片和相应的按钮操作显示填满整个窗口，把窗口的其他元素全部隐藏；
预览完了，点击除按钮其他地方，预览窗口隐藏，窗口的其他元素如之前一样显示。

界面代码：

这是载入图片，预览并能删除功能，为了不引起困惑贴出了所有的代码如下：

<!--pages/metting/mettingaddedit.wxml-->
<view class="cl-item" style="display:{{fullShowIndex>=0 ? 'none' : 'flex'}};">
  <text class="cl-view">标题:</text>
  <input class="cl-input" bindinput="changeTitle" value="{{inputTitile}}" />
</view>
<view class="cl-item" style="display:{{fullShowIndex>=0 ? 'none' : 'flex'}};">
  <text class="cl-view">会议室:</text>
  <picker mode="selector" range="{{roomarray}}" range-key="name" value="{{roomarrayindex}}" bindchange="bindPickerRoomChange">
    <view>{{roomarray[roomarrayindex].name}}</view>
  </picker>
</view>
<view class="cl-item" style="display:{{fullShowIndex>=0 ? 'none' : 'flex'}};">
  <text class="cl-view">描述:</text>
  <textarea class="cl-input" style="border: 1px solid #c5bbbb;max-height: 160rpx;overflow-y:scroll;" maxlength="-1" bindinput="changeDesc" value="{{inputDesc}}" />
</view>
<view class="cl-item" style="flex-direction: row;display:{{fullShowIndex>=0 ? 'none' : 'flex'}};align-items: center;">
  <text class="cl-view">时间:</text>
  <picker mode="date" value="{{date}}" start="2010-09-01" end="2030-09-01" bindchange="bindDateChange">
    <view class="cl-datetime">
      {{date}}
    </view>
  </picker>
  <picker mode="time" value="{{time}}" start="08:00" end="23:59" bindchange="bindTimeChange">
    <view class="cl-datetime">
      {{time}}
    </view>
  </picker>
</view>
<view style="padding: 8rpx;flex-direction: row;display:{{fullShowIndex>=0 ? 'none' : 'flex'}};gap: 50rpx;" >
  <button class="btn-sub" bindtap="onclickSubmit">{{showSubmitBtnStr}}</button>
  <button class="btn-sub" bindtap="onclickReturn">返回</button>  
</view>
<scroll-view scroll-x enable-flex style="padding: 8rpx;flex-direction: row;display: flex;gap: 10rpx;">
  <view class="image-view" style="display:{{fullShowIndex>=0 ? 'none' : 'flex'}}">
    <view class="image-item">
      <image class="image-in" src="{{imageData}}" bindtap="onclickToPreView"></image>
      <text>测试</text>
    </view>
    <view class="image-item">
      <image class="image-in" src="{{picShowAdd}}" bindtap="onclickUpPic"></image>
      <text style="color: blue;">上传图片</text>
    </view>
  </view>
</scroll-view> 
<view style="display: {{fullShowIndex>=0 ? 'fixed' : 'none'}};width: 100%;height: 100%;flex-direction: column;position:absolute;bottom: 0;top: 0;right: 0;left: 0;" bindtap="onclickPreViewReturn"> 
  <image style="width: 100%;" mode="widthFix" src="{{imageData}}"></image>
  <button style="width: fit-content;height: min-content;border: 1px solid #90e6f5;" catch:tap="onclickDelPic">删除</button>
</view>

注意上面核心部分预览的代码

<view style="display: {{fullShowIndex>=0 ? 'fixed' : 'none'}};width: 100%;height: 100%;flex-direction: column;position:absolute;bottom: 0;top: 0;right: 0;left: 0;" bindtap="onclickPreViewReturn"> 
  <image style="width: 100%;" mode="widthFix" src="{{imageData}}"></image>
  <button style="width: fit-content;height: min-content;border: 1px solid #90e6f5;" catch:tap="onclickDelPic">删除</button>
</view>

js代码：

代码太多，列出相关功能的代码

// pages/metting/mettingaddedit.js
var app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    picShowAdd:'',
    imageData:null,
    fullShowIndex:-1
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },

  onclickUpPic(e) {
    var that = this;
    console.log("onclickUpPic");
    wx.chooseMedia({
      count: 9,
      mediaType: ['image','video'],
      sourceType: ['album', 'camera'],
      maxDuration: 30,
      camera: 'back',
      success(res) {
        console.log(res.tempFiles[0].tempFilePath);
        console.log(res.tempFiles[0].size);
        //that.upPicServer(res.tempFiles[0].tempFilePath);
        that.setData({
          imageData:res.tempFiles[0].tempFilePath
        });
      }
    });
  },  

  onclickToPreView(e) {
    this.setData({
      fullShowIndex:0
    });
  },
  onclickPreViewReturn(e) {
    this.setData({
      fullShowIndex:-1
    });
  },
  onclickDelPic(e) {
    console.log("onclickDelPic");
    //这里你们实现功能，就不贴代码了
  },
})

关键点说明：

1、通过变量来控制显示隐藏，预览的时候，预览部分显示其他部分隐藏，反之亦然；
如代码块，关键变量fullShowIndex：
2、核心部分代码，预览的view，要设置成全屏显示，如stype里面：position:absolute;bottom: 0;top: 0;right: 0;left: 0;
3、图片显示，希望尽量显示大又要按照原来比例，< image style=“width: 100%;” mode=“widthFix” src=“{{imageData}}”>，注意width: 100%，mode=“widthFix”。
4、在预览view，加上按钮响应，用来恢复成之前状态，即点击除按钮其他地方，都要退出预览模式，，中的bindtap="onclickPreViewReturn
5、预览界面删除按钮响应要设置成非冒泡事件，即点了删除不能让父窗口再响应按钮事件，代码：删除中的catch:tap=“onclickDelPic”