laboratory_maintenance_app/common/betone_components/betone-upload.vue

<template>
  <view class="img-box">
    <view class="bg-img" v-for="(item, index) in fileList" :key="index" :data-url="fileList[index]">
      <view class="del-icon" v-if="!disabled">
        <u-icon name="close" color="#fff" size="14" top="-20" @click="deleteFn(item, index)"></u-icon>
      </view>
      <image v-if="isImage(item)" @click="previewImage(item)" :src="item.link" mode="aspectFill"></image>
      <image class="video-img" v-if="isVideo(item)" @click="previewVideo(item)" src="@/static/images/submit/video.svg"
        mode="aspectFill"></image>
    </view>
    <view class="upload" @click="chooseFile" v-if="!disabled">
      <u-icon size="28" name="plus" color="rgba(139,146,155,1)"></u-icon>
    </view>

    <!-- 视频预览弹框 -->
    <u-mask :show="videoShow" :custom-style="{ display: 'flex', alignItems: 'center', justifyContent: 'center' }">
      <u-icon class="icon-close" color="#fff" name="close-circle" size="68" @click="videoShow = false"></u-icon>
      <video id="myVideo" v-if="videoShow" enable-play-gesture style="width: 100wh" :src="videoLink" controls></video>
    </u-mask>
    <betone-loading ref="BetLoading"></betone-loading>
  </view>
</template>

<script>
import { isVideo, isImage } from "@/utils/util";
export default {
  name: "spUpload",
  model: {
    prop: "value",
    event: "changeFile",
  },
  props: {
    type: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    value: {
      type: Array,
      default: [],
    },
    formIndex: {
      type: Number,
      default: 0,
    }
  },
  watch: {
    value(data) {
      this.fileList = data;
    },
  },
  data() {
    return {
      fileList: [],//数据列表
      videoShow: false,
      videoLink: ''
    };
  },
  methods: {
    // 选择文件
    chooseFile() {
      if (this.type == "video") {
        this.chooseVideo();
      }
      if (this.type == "images") {
        this.chooseImage();
      }
    },
    chooseImage() {
      uni.chooseImage({
        count: 1, // 默认9
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success: (res) => {
          this.$refs.BetLoading.show()
          // 成功选择图片后的回调
          this.uploadFile(res.tempFilePaths[0]);
        },
      });
    },
    chooseVideo() {
      uni.chooseVideo({
        count: 1, // 默认9
        sourceType: ["album", "camera"],
        success: (res) => {
          this.$refs.BetLoading.show()
          // 成功选择视频后的回调
          this.uploadFile(res.tempFilePath);
        },
      });
    },
    uploadFile(filePath) {
      uni.uploadFile({
        url: "http://124.221.142.15:8088/lab/blade-resource/oss/endpoint/put-file", // 服务器上传接口
        filePath: filePath,
        name: "file", // 必须填写，后台用来接收文件
        formData: {},
        success: (res) => {
          let info = JSON.parse(res.data);
          console.log("上传成功", info); // 上传成功后的操作

          this.fileList.push({
            'link': info.data.link,
            'name': info.data.name
          });
          this.$emit('changeFile', this.fileList, this.formIndex)
          this.$refs.BetLoading.hide()
        },
        error: (uploadFileRes) => {
          console.log("上传失败", uploadFileRes.data); // 上传成功后的操作
          this.$refs.BetLoading.hide()
        },
      });
    },
    // 预览图片
    previewImage(item) {
      uni.previewImage({
        current: '', // 当前显示图片的 http 链接
        urls: [item.link]
      })
    },
    // 预览视频
    previewVideo(item) {
      this.videoShow = true
      this.videoLink = item.link
    },
    // 删除
    deleteFn(item, index) {
      this.fileList.splice(index, 1)
      this.$emit('changeFile', this.fileList, this.formIndex)
    },
    // 判断是视频还是图片
    isImage(arg) {
      // 实现你的方法逻辑
      return isImage(arg.link); // 调用导入的方法
    },
    isVideo(arg) {
      // 实现你的方法逻辑
      return isVideo(arg.link); // 调用导入的方法
    }
  },
};
</script>

<style lang="scss" scoped>
.img-box {
  .bg-img {
    width: 168rpx;
    height: 168rpx;
    float: left;
    border-radius: 10rpx;
    overflow: hidden;
    margin-right: 30rpx;
    position: relative;
    // margin-top: 32rpx;
    background: #fff;
    border: 1px solid rgba(217, 217, 217, 1);
    image {
      width: 100%;
      height: 100%;
    }
    .video-img{
      width: 50%;
      height: 50%;
      margin: auto;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    .del-icon {
      position: absolute;
      top: 8rpx;
      right: 8rpx;
      z-index: 9;
      width: 36rpx;
      height: 36rpx;
      border-radius: 50%;
      background: red;
      text-align: center;
    }
  }

  .upload {
    border: 1px solid rgba(217, 217, 217, 1);
    width: 168rpx;
    height: 168rpx;
    text-align: center;
    line-height: 168rpx;
    float: left;
    border-radius: 10rpx;
    margin-bottom: 32rpx;
  }
  .icon-close{
		position: absolute;
		top: 40rpx;
		right: 40rpx;
	}
}
</style>