share_h5/components/uploadImg/unloadVideo.vue

<template>
  <view class="w-100 imgupload">
    <view class="w-100 flex_wrap">
      <view class="imgs-view" v-if="videoUrl">
        <video :src="videoUrl" style="height: 200rpx;
		width: 100%;"></video>

        <view class="del-btn" @click="delVideo()">
          <image
            :src="
              config.delIcon ||
              'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA5UlEQVQ4T2NkQAP3fTXs//1njPvP8N+BkYFBCST9n4HhHiMD4wEmxv+LFDffOIishRGZc89HY9Z/BoZUdEPRNMxW2nIjDSYGN+COj8YORgYGd3yaYXL/GRh2qmy54QHigw0gxmZ0gxkZGMAuYYT4meEAMTajq2FiZHBgvOujOZeB4X8SOQYwMDDOY7zjo3EXFtqkGgKOnbs+Gv9hGsVKexm4jG3xmvPt7GGGV93FcDUoBvD7xTGwyijiNeD3k/sMHzctQhhABS9QGIgURyPFCQkWGhQlZZghxCRpWBLGyEwwAVKzMwB5V2gPAYXmLgAAAABJRU5ErkJggg=='
            "
          ></image>
        </view>
      </view>
      <view v-else class="upload-img-view flex_xy_center" @click="upPhoto">
        <image
          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAArklEQVRIS2NkGCDAOED2Mgw9i9vb2xVAoVVZWfmAnFAj28ddXV33QRaWlZUp0tvi/1CLyXI8WZpAFnZ1dY1aTFJUjwY10cE1mriIDiqoQpTEBSoGmZmZ9zMwMICLQyqC08zMzDHFxcW3YGYODotJ8eFo4iIltEBqR0suokNsNHERHVTYSi5SNA9kUJ+CtrnMSHEw1iKTFAN6e3vVQOqRy19S9JOdj0mxBJvakWcxAFpiZB+QSLWnAAAAAElFTkSuQmCC"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "VideoUpload",
  props: {
    videoSrc: {
      //视频文件
      type: String,
      default: null,
    },

    videoSize: {
      //图片大小 单位M
      type: Number,
      default: 10,
    },
    formData: {
      type: Object,
      default: function () {
        return {};
      },
    },
    imgType: {
      //如果是小程序，这个值则没用作用
      type: [Array],
      default: function () {
        return ["MP4", "mp4"];
      },
    },

    loading: {
      type: Boolean,
      default: true,
    },
    url: {
      //上传图片Url
      type: String,
    },
    async: {
      type: Boolean,
      default: false,
    },
    header: {
      type: Array,
      default: function () {
        return [];
      },
    },
    previewMany: {
      type: Boolean,
      default: false,
    },

    config: {
      type: Object,
      default: function () {
        return {
          delIcon: "", //删除图片icon
          resultTip: true, //结果提示
          resultType: "1", //结果展示类型
          loadIcon: "", //加载时的图标
          loadText: "", //加载时的文字
        };
      },
    },
  },
  data() {
    return {
      videoUrl: null,
      startUpload: false,
      tipObj: {
        prompt: "",
        typeColor: "#009100",
        must: false, //必须要存在的时候
        success: "#009100", //成功-#009100; 可自定义修改
        warning: "#bb9300", // 警告 -#bb9300; 可自定义修改
        error: "#FF0000", // 失败--#FF0000; 可自定义修改
      },
      headers: {},
      curPlatform: "",
      currIndex: null,
      ossData: {}, //oss参数
      duration: null,
      size: null,
      VideoSize: 100,
    };
  },
  created() {
    this.formDataGet();
  },
  watch: {
    videoSrc(n, o) {
      this.videoUrl = n;
    },
  },
  methods: {
	  delVideo(){ uni.showModal({
        title: "提示",
        content: "是否删除？",
        success:  (res)=> {
          if (res.confirm) {
this.videoUrl=null,
  this.duration=null,
    this.size=  null,
	 this.$emit("resultVideo", {
            url: this.videoUrl,
            size: this.size,
            duration: this.duration,
          });

		  }}})
 
	  },
    //上传凭证
    formDataGet() {
      let that = this;
      uni.request({
        //url: 'https://pm.lidashine.com/get-oss-sign', //oss获取参数接口地址。
        url: "http://47.97.79.225:9020/fileMgr/v1/oss/getOssSign",
        complete: (result) => {
          let res = JSON.parse(result.data.data);
          that.ossData = res;
        },
      });
    },

   
    // 随机生成文件名
    random_string(len) {
      len = len || 32;
      var chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz123456789";
      var maxPos = chars.length;
      var pwd = "";
      for (let i = 0; i < len; i++) {
        pwd += chars.charAt(Math.floor(Math.random() * maxPos));
      }
      return pwd;
    },
    //上传图片
    upPhoto() {
      let that = this;

      uni.chooseVideo({
        count: 1,
        sourceType: ["camera", "album"],
        success: function (res) {
          console.log(res, JSON.stringify(res));
          if (res.tempFile.size > that.VideoSize * 1024 * 1024) {
            uni.showToast({
              title: `图片不能大于${that.VideoSize}M`,
              icon: "none",
            });
            return false;
          }
		 
          (that.duration = res.duration),
            (that.size = res.size);
          that.updataImg(res.tempFile, res.tempFilePath);
        },
      });
    },

    updataImg(file, filePath) {
      let imgname = this.random_string(8) + "." + file.name.split(".").pop();
      let dir = "media/" + imgname;
      let ossData = this.ossData;
	    uni.showLoading();
      uni.uploadFile({
        url: ossData.host,
        filePath: filePath,
        fileType: "video",
        name: "file",
        formData: {
          name: imgname,
          key: dir,
          policy: ossData.policy,
          OSSAccessKeyId: ossData.accessid,
          success_action_status: "200",
          signature: ossData.signature,
        },
        success: (res) => {
          uni.hideLoading();
          if (res.statusCode != 200) {
            return;
          }
          this.videoUrl = ossData.host + "/" + dir;
          console.log(this.videoUrl);

          this.$emit("resultVideo", {
            url: this.videoUrl,
            size: this.size,
            duration: this.duration,
          });
          uni.showToast({
            title: "上传成功",
            icon: "success",
            duration: 1000,
          });

          // alert(ossRes.host+"/"+encodeURIComponent(fileName));
        },
        fail: (err) => {
          uni.hideLoading();
          console.log("uploadImage fail", err);
          uni.showModal({
            content: err.errMsg,
            showCancel: false,
          });
        },
      });
    },
  },
};
</script>


<style scoped>
.w-100 {
  width: 100%;
}

.flex {
  /* 转为弹性盒模型*/
  display: flex;
}

.flex_bet {
  /* 两端左右*/
  display: flex;
  justify-content: space-between;
}

.flex_wrap {
  /* 转为弹性盒模型并自动换行*/
  display: flex;
  flex-wrap: wrap;
}

.flex_xy_center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.upload-img-view {
  height: 200rpx;
  width: 32%;
  border-radius: 10rpx;
  border: 4rpx dotted #f1f1f1;
  /* background-color: #F1F1F1; */
}

.upload-img-view > image {
  width: 70rpx;
  height: 70rpx;
}

.upload-txt {
  font-size: 24rpx;
  color: #ffffff;
}

.imgs-view {
  height: 200rpx;
  width: 31.5%;
  border-radius: 10rpx;
  margin-right: 1.8%;
  margin-bottom: 16rpx;
  border: 1rpx solid #f1f1f1;
  box-sizing: border-box;
  position: relative;
}

.result {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 45rpx;
  font-size: 26rpx;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  text-align: center;
  line-height: 45rpx;
  border-bottom-left-radius: 10rpx;
  border-bottom-right-radius: 10rpx;
}

.result > .success {
  color: #00b900;
}

.result > .error {
  color: #b52e25;
}

.uploading {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 100%;
  z-index: 999;
}

.uploading image {
  width: 60rpx;
  height: 60rpx;
  z-index: 1000;
  animation: rotation 0.6s linear infinite;
  -moz-animation: rotation 0.6s linear infinite;
  -webkit-animation: rotation 0.6s linear infinite;
  -o-animation: rotation 0.6s linear infinite;
}

@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}

.imgs-view > image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}

.imgupload__tip {
  font-size: 24rpx;
  color: #ff0000;
  margin: 10rpx auto;
}

.imgupload__tip > label {
  color: #009100;
}

.del-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 32rpx;
  height: 32rpx;
  z-index: 999;
}

.del-btn > image {
  width: 100%;
  height: 100%;
  display: flex;
}

.css2 {
  border-style: solid;
  border-width: 0px 0px 100px 100px;
  border-color: transparent transparent blue transparent;
  width: 0px;
  height: 0px;
}
</style>