相机拍照和视频录制组件封装

最新推荐文章于 2024-09-25 16:17:35 发布

知识划过大脑皮层

最新推荐文章于 2024-09-25 16:17:35 发布

阅读量235

点赞数 7

文章标签：数码相机音视频 javascript

本文链接：https://blog.csdn.net/m0_59443831/article/details/141287706

版权

完整代码

<template>
  <view>
    <view class="uni-uploader-body" style="max-height: 220px; overflow: auto">
      <view class="uni-uploader__files" style="display: flex; flex-wrap: wrap">
        <!-- 图片 -->
        <block v-for="(image, Iindex) in imageArr" :key="Iindex">
          <view class="uni-uploader__file" style="margin-right: 5px">
            <view class="icon iconfont icon-cuo" @click="delect(Iindex)">X</view>
            <image class="uni-uploader__img" :src="image" :data-src="image" @click="previewImage"></image>
          </view>
        </block>
        <!-- 视频 -->
        <view
          class="uni-uploader__file serchjia"
          v-for="(video, Sindex) in srcArr"
          :key="Sindex"
          style="margin-right: 5px"
        >
          <view class="" style="position: relative; height: 180rpx; background-color: black">
            <view class="icon iconfont icon-cuo" @click="delectVideo(Sindex)" style="margin-bottom: 5px">X</view>
            <view class="uploader_video" style="top: 20px">
              <video :src="video" class="video"></video>
            </view>
          </view>
        </view>
        <view class="uni-uploader__input-box" @click="chooseVideoImage()">
          <view class="uni-uploader__input">+</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'imageVideo',
  props: {
    Data: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      imageArr: [],
      srcArr: [],
      // 图片视频上传
      imagesUrlPath: [],
      VideoUrlPath: [],
      imageList: [], //图片
      src: [], //视频存放
      sourceTypeIndex: 2,
      checkedValue: true,
      checkedIndex: 0,
      sourceType: ['拍摄', '相册', '拍摄或相册'],
      cameraList: [
        {
          value: 'back',
          name: '后置摄像头',
          checked: 'true',
        },
        {
          value: 'front',
          name: '前置摄像头',
        },
      ],
      cameraIndex: 0,
      VideoOfImagesShow: true,
      config: {
        fileUrl: '/smart/file/upload',
      },
    }
  },
  methods: {
    // 图片视频上传
    chooseVideoImage() {
      uni.showActionSheet({
        title: '选择上传类型',
        itemList: ['图片', '视频'],
        success: res => {
          //   console.log(res)
          if (res.tapIndex == 0) {
            this.chooseImages()
          } else {
            this.chooseVideo()
          }
        },
      })
    },
    chooseImages() {
      uni.chooseImage({
        count: 1, // 最多可以选择的图片张数，默认1
        sizeType: ['compressed'], // 压缩选图
        sourceType: ['camera'], // 选择图片的来源，相册或者拍照
        success: res => {
          // tempFilePaths 是一个数组，tempFilePaths[0] 是选择的图片路径
          const tempFilePaths = res.tempFilePaths
          // 将选择的图片添加到 imageList 中
          this.imageList.push(tempFilePaths[0])
          // 上传图片到服务器的逻辑，可以根据实际情况调用接口上传
          this.uploadImage(tempFilePaths[0])
        },
        fail: err => {
          console.log('选择图片失败', err)
        },
      })
    },
    chooseVideo() {
      uni.chooseVideo({
        sourceType: ['camera'], // 视频选择的来源，相册或者拍摄
        compressed: true, // 是否压缩视频文件
        maxDuration: 20, // 视频最长拍摄时间，单位秒。不超过60秒
        camera: this.cameraList[this.cameraIndex].value, // 使用前置或后置摄像头
        success: res => {
          // tempFilePath 是选择的视频临时文件路径
          const tempFilePath = res.tempFilePath
          // 将选择的视频添加到 src 数组中
          this.src.push(tempFilePath)
          // 上传视频到服务器的逻辑，可以根据实际情况调用接口上传
          this.uploadVideo(tempFilePath)
        },
        fail: err => {
          console.log('选择视频失败', err)
        },
      })
    },
    uploadImage(imagePath) {
      uni.uploadFile({
        url: this.config.fileUrl, // 上传图片的接口地址
        filePath: imagePath,
        name: 'file', // 后端接收文件的参数名
        success: res => {
          console.log('图片上传成功', res.data)
          let myData = JSON.parse(res.data) // 解析 JSON 字符串为对象
          let url = myData.data.url // 后端返回的图片链接
          // 检查当前数据是否已经有值
          // 如果已经有值，则在现有值后面加上分号和新的链接
          this.imageArr.push(url)
          console.log('this.Data1', this.Data)
          console.log('this.imageArr', this.imageArr)
          this.$emit('complete', {
            imgArr: this.imageArr,
            srcArr: this.srcArr,
          })
          this.$forceUpdate()
        },
        fail: err => {
          console.log('图片上传失败', err)
        },
      })
    },
    uploadVideo(videoPath) {
      uni.uploadFile({
        url: this.config.fileUrl, // 上传视频的接口地址
        filePath: videoPath,
        name: 'file', // 后端接收文件的参数名
        success: res => {
          console.log('视频上传成功', res.data)
          // 可以根据后端返回的数据处理其他逻辑
          let myData = JSON.parse(res.data) // 解析 JSON 字符串为对象
          let url = myData.data.url // 假设这是后端返回的图片链接
          // 检查当前数据是否已经有值
          this.srcArr.push(url)
          console.log('this.Data1', this.Data)
          console.log('this.srcArr', this.srcArr)

          this.$emit('complete', {
            imgArr: this.imageArr,
            srcArr: this.srcArr,
          })
          this.$forceUpdate()
        },
        fail: err => {
          console.log('视频上传失败', err)
        },
      })
    },
    previewImage: function (e) {
      //预览图片
      var current = e.target.dataset.src
      uni.previewImage({
        current: current,
        urls: this.imageList,
      })
    },
    delect(index) {
      uni.showModal({
        title: '提示',
        content: '是否要删除该图片',
        success: res => {
          if (res.confirm) {
            this.imageArr.splice(index, 1)
            this.$emit('remove', {
              imgArr: this.imageArr,
              srcArr: this.srcArr,
            })
            this.$forceUpdate()
          }
        },
      })
    },
    delectVideo(index) {
      uni.showModal({
        title: '提示',
        content: '是否要删除此视频',
        success: res => {
          if (res.confirm) {
            this.srcArr.splice(index, 1)
            this.$emit('remove', {
              imgArr: this.imageArr,
              srcArr: this.srcArr,
            })
            // 如果使用 Vue 3，通常不需要手动调用 this.$forceUpdate()，因为 Vue 3 的响应式系统会自动处理 UI 更新。
            this.$forceUpdate()
          }
        },
      })
    },
    resetAll() {
      this.srcArr = []
      this.imageArr = []
      this.$emit('resetAll', {
        imgArr: this.imageArr,
        srcArr: this.srcArr,
      })
      this.$forceUpdate()
    },
  },
}
</script>

<style>
.burst-info {
  margin-bottom: 10px;
}

.uni-uploader-body {
  max-height: 220px;
  overflow: auto;
}
.uni-uploader__file {
  margin-right: 5px;
  margin-bottom: 5px; /* 控制图片和视频之间的间距 */
  position: relative;
}

.icon-cuo {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 16px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 2px 5px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
}

.uni-uploader__img {
  width: 150rpx;
  height: 150rpx;
  object-fit: cover; /* 图片填充方式 */
  border-radius: 4px;
}

.uploader_video {
  width: 150rpx;
  height: 150rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}
.uni-uploader__input-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150rpx;
  height: 150rpx;
  border: 1px dashed #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.uni-uploader__input {
  font-size: 40px;
  color: #ccc;
}
</style>

注意事项：这里在引入和使用组件时使用v-if来解决了数据残留的问题，之前不使用v-if会导致在页面加载时，由于在v-for循环中会同时加载多个组件，此时共享的是同一份数据。会导致上一次使用组件所添加的照片或视频会被共享，导致在下一条会有上一条的数据残留。通过v-if控制每次都是将组件在需要的时候创建和销毁。这样就保持了数据间独立，从而解决问题。

<view class="unit_info" v-for="(item, index) in data" :key="item.id">
            <tui-modal
              :key="index"
              :show="modal"
              backgroundColor="white"
              color="#333"
              maskClosable="true"
              maskColor="rgba(0, 0, 0, 0.1)"
              @cancel="handleCancel"
              custom
            >
              <view class="tui-modal-custom">
                <view style="margin-bottom: 20rpx; width: 100%; display: grid">
                  <uni-data-checkbox
                    style="margin-bottom: 30rpx"
                    v-model="verifyData.dangerCheckResult"
                    :localdata="verifyList"
                    wrap="false"
                  />
                  <uni-easyinput
                    style="margin-bottom: 30rpx"
                    type="textarea"
                    v-model="verifyData.dangerCheckMemo"
                    placeholder="情况说明"
                  ></uni-easyinput>
                  <view>照片详情：</view>
                  <view style="display: flex; margin-top: 20rpx">
                    <!-- 使用v-if解决数据残留问题 -->
                    <imageVideo
                      v-if="modal"
                      @complete="handleUploadComplete($event)"
                      @remove="remove($event)"
                      @resetAll="resetAll($event)"
                      :Data="item"
                      @getData="showMsgFromChild"
                    />
                  </view>
                </view>
                <view style="display: flex; justify-content: center; width: 100%">
                  <tui-button width="500rpx" height="72rpx" :size="28" type="danger" @click="handleSave">
                    确定
                  </tui-button>
                </view>
              </view>
            </tui-modal>
          </view>