uni-app: APP端同时选择图片和视频，长按删除并震动提示

APP端同时选择图片和视频

• 全部代码：

<!--  -->
<template>
  <view>
    
    <view>
     
      <view>
        <view style="width: 538rpx; flex-wrap: wrap">
          <view v-for="(item, index) in mediaList" :key="index">
            <view
              v-if="item.type == 'photo'"
              class="delParent"
              @touchstart.prevent="touchstart(index)"
              @touchend.prevent="touchend"
            >
              <image :src="item.path" mode="" class="mediaContent"> </image>
            </view>
            <video
              v-else-if="item.type == 'video'"
              @touchstart.prevent="touchstart(index)"
              :src="item.path"
              mode=""
              class="mediaContent"
            ></video>
          </view>
          <view
            class="evidenceUpload flex align-center justify-center"
            @tap="evidenceClick"
            v-if="picPathListLength < 3"
          >
            <image
              src="../../../static/check/upPicAndVideo.png"
              mode=""
              style="width: 54rpx; height: 54rpx"
            >
            </image>
          </view>
        </view>
      </view>
    </view>
   
    <u-popup v-model="chooseMedShow" mode="bottom" width="661rpx">
      <view class="cameraHint">
        <view class="bottonBorder">
          <button @tap="upCamera">图片</button>
          <button @tap="chooseVideo">视频</button>
          <button @tap="toCancle">取消</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      chooseMedShow: false,
      mediaList: [],
      picPathListLength: 0,
    };
  },
  methods: {
    touchstart(index) {
      let that = this;
      clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
      this.Loop = setTimeout(
        function () {
         // 使手机轻微震动
          uni.vibrateShort({
					success: function() {
						console.log('success');
					}
				});
          uni.showModal({
            title: "提示",
            content: "是否要删除该图片？",
            success: async function (res) {
              if (res.confirm) {
                that.mediaList.splice(index, 1);

                that.picPathListLength = that.mediaList.length;
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
        }.bind(this),
        1000
      );
    },

    touchend() {
      clearInterval(this.Loop);
    },

    toCancle() {
      this.chooseMedShow = false;
    },
    evidenceClick() {
      this.chooseMedShow = true;
    },
      // APP端不支持uni.chooseMedia(OBJECT)，选择图片还是视频需要分开
    upCamera() {
      uni.chooseImage({
        count: 3, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["camera", "album"], //拍照或从相册选择
        success: (res) => {
          console.log(res);
          console.log(JSON.stringify(res.tempFilePaths));
          const tempFilePaths = res.tempFilePaths;
          for (var i = 0; i < tempFilePaths.length; i++) {
            this.mediaList.push({ path: tempFilePaths[i], type: "photo" });
            console.log("tempFilePaths" + tempFilePaths[i]);
          }

          this.picPathListLength = this.mediaList.length;
          this.toCancle();
        },
      });
    },
    chooseVideo() {


      // //   选择视频
      uni.chooseVideo({
        sourceType: ["camera", "album"],
        success: (res) => {
          this.mediaList.push({ path: res.tempFilePath, type: "video" });

          this.picPathListLength = this.mediaList.length;
          this.toCancle();
        },
      });
    },
    
    
  },
};
</script>
<style lang='scss'>
css 我就不写出来了
</style>

• 详解：

<view>
    
    <view class="treeBody">
     
      <view class="flex">
        <view class="flex" style="width: 538rpx; flex-wrap: wrap">
            <!-- 视频和图片都放在mediaList里，遍历时对单项type进行判断，图片和视频分开展示 -->
            <!--   @touchstart.prevent="touchstart(index)"
                   @touchend.prevent="touchend"为长按删除图片 -->
          <view v-for="(item, index) in mediaList" :key="index">
            <view
              v-if="item.type == 'photo'"
              class="delParent"
              @touchstart.prevent="touchstart(index)"
              @touchend.prevent="touchend"
            >
              <image :src="item.path" mode="" class="mediaContent"> </image>
            </view>
            <video
              v-else-if="item.type == 'video'"
              @touchstart.prevent="touchstart(index)"
              :src="item.path"
              mode=""
              class="mediaContent"
            ></video>
          </view>
          <!-- evidenceClick 控制u-popup的弹出 -->
          <!-- 当图片和视频小于三个时会显示继续上传的提示图片 -->
          <view
            class="evidenceUpload flex align-center justify-center"
            @tap="evidenceClick"
            v-if="picPathListLength < 3"
          >
            <image
              src="../../../static/check/upPicAndVideo.png"
              mode=""
              style="width: 54rpx; height: 54rpx"
            >
            </image>
          </view>
        </view>
      </view>
    </view>
   
   <!-- 弹出层 -->
    <u-popup v-model="chooseMedShow" mode="bottom" width="661rpx">
      <view class="cameraHint">
        <view class="bottonBorder">
          <button @tap="upCamera">图片</button>
          <button @tap="chooseVideo">视频</button>
          <button @tap="toCancle">取消</button>
        </view>
      </view>
    </u-popup>
  </view>

• 长按删除

 touchstart(index) {
      let that = this;
      clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
      this.Loop = setTimeout(
        function () {
         // 使手机轻微震动
          uni.vibrateShort({
					success: function() {
						console.log('success');
					}
				});
          uni.showModal({
            title: "提示",
            content: "是否要删除该图片？",
            success: async function (res) {
              if (res.confirm) {
                //   从数组中删除图片
                that.mediaList.splice(index, 1);
                // 更新数组长度，使提示上传的图片再次显示
                that.picPathListLength = that.mediaList.length;
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
        }.bind(this),
        1000
      );
    },

    touchend() {
      clearInterval(this.Loop);
    },

• 选择图片和视频

   // 选择图片或者拍照
    upCamera() {
      uni.chooseImage({
        count: 3, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["camera", "album"], //拍照或从相册选择
        success: (res) => {
          console.log(res);
          console.log(JSON.stringify(res.tempFilePaths));
          const tempFilePaths = res.tempFilePaths;
        //   将图片添加进mediaList，并为单项值添加type属性
          for (var i = 0; i < tempFilePaths.length; i++) {
            this.mediaList.push({ path: tempFilePaths[i], type: "photo" });
            console.log("tempFilePaths" + tempFilePaths[i]);
          }
        // 
          this.picPathListLength = this.mediaList.length;
        //   取消弹出层
          this.toCancle();
        },
      });
    },
    chooseVideo() {
      // APP端不支持uni.chooseMedia(OBJECT)，需要判断是选择图片还是视频

      // //   选择视频
      uni.chooseVideo({
        sourceType: ["camera", "album"],
        success: (res) => {
          this.mediaList.push({ path: res.tempFilePath, type: "video" });

          this.picPathListLength = this.mediaList.length;
          this.toCancle();
        },
      });
    },