点击上传图片/上传视频

一、点击上传图片

····结构：
    <div class="upload-wrap">
      <div class="upload-input">
        <div class="image-no" @click.stop="openFile" v-if="!image.url">
        </div>
        <div class="image-yes" @click.stop="openFile" v-else>
          <img :src="image.url" alt="" />
        </div>
        <input
          type="file"
          class="select-file-img"
          ref="selectFileImg"
          accept="image/*"
          @change="selectFileImg"
        />
      </div>
    </div>
····数据：
      image: {
        file: null,
        url: null,
      },
      imgFile: null,
      imgName: "",
····方法：
    // 创建点击事件并出发file选择图片
    openFile() {
      const click = new window.MouseEvent("click");
      this.$refs.selectFileImg.dispatchEvent(click);
    },
    // 文件选择
    selectFileImg() {
      const input = this.$refs.selectFileImg;
      const files = input.files;
      if (files.length < 1) return;
      const image = files[0];
      const size = 5 * 1024 * 1024; // 限定大小
      if (!image.type.includes("image")) {
        this.$toast("必须上传图片");
        input.value = "";
        return;
      }
      console.log(image,"image")
      if (image.size > size) {
        this.$toast("图片大小不能超过5M");
        input.value = "";
        return;
      }
      this.image.file = image;
      this.imgFile = image;
      this.imgName = image.name;
      this.next();
    },
    // 上传接口
    next() {
      const obj = {
        meeting_id: this.meeting.id,
        image: this.image.file
      };
      const formdata = new window.FormData();
      formdata.append("meeting_id", obj.meeting_id);
      formdata.append("image", obj.image);

      this.$http.upImg(formdata)
        .then((r) => {
          if (r.code != 1) {
            this.$toast(r.msg);
            return;
          }
          this.image.url = `//yirunoss.luckevent.com/${r.res.url}?x-oss-process=style/small_three`;
        })
        .catch((e) => {
          console.error(e);
        });
    },
····样式：
  .upload-wrap {
    width: 28vw;
    height: 28vw;
    position: absolute;
    right: 20vw;
    top: 123.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .upload-input {
      overflow: hidden;
      position: relative;
      z-index: 2;

      .image-no {
        width: 28vw;
        height: 28vw;
      }

      .image-yes {
        width: 28vw;
        height: 28vw;
        overflow: hidden;
        display: flex;
        align-items: center;

        img {
          display: block;
          width: 28vw;
        }
      }

      .select-file-img {
        display: none;
      }
    }
  }

二、点击上传视频

····结构：
    <!-- 选择文件 -->
    <div class="updata-pub updata-file">
      <div class="tip">
        <img src="./../../assets/wish-dinner/icon-right.svg" alt="">
      </div>
      <p @click.stop="selectVideoClick">{{ videoName }}</p>
      <div class="delete" :class="videoFile ? '' : 'hidden-delete'" @click.stop="deleteVideo"
        >删除</div>
      <input
        type="file"
        accept="video/*"
        style="display: none"
        ref="selectFileVideo"
        @change="selectVideo"
      />
    </div>
    <div class="tip-m">1. 视频大小不超过20M &nbsp; 2.建议上传竖版视频，以方便查看</div>
····数据：
      videoFile: null,
      videoName: "选择视频文件",
····方法：
    // 创建点击事件并出发file选择视频
    selectVideoClick() {
      const click = new MouseEvent("click");
      this.$refs.selectFileVideo.dispatchEvent(click);
    },
     // 选择视频之后的回调
    selectVideo() {
      const files = this.$refs.selectFileVideo.files;
      if (files.length < 1) return;
      const video = files[0];
      const size = 20 * 1024 * 1024; // 限定的视频大小
      console.log(files);
      if (!video.type.includes("video")) {
        this.$toast("必须上传视频");
        this.$refs.selectFileVideo.value = "";
        return;
      }
      if (video.size > size) {
        this.$toast("视频大小不能超过20M");
        this.$refs.selectFileVideo.value = "";
        return;
      }
      this.videoFile = video;
      this.videoName = video.name;
    },
     // 删除视频
    deleteVideo() {
      const files = this.$refs.selectFileVideo.files;
      if (files.length < 1) return;
      this.$refs.selectFileVideo.value = "";
      this.videoFile = null;
      this.videoName = "选择视频";
    },
····样式：
  .updata-pub {
    width: 86vw;
    height: 11.2vw;
    line-height: 11.2vw;
    background-color: #fff;
    border: 1px solid #333;
    border-radius: 1.5vw;
    padding: 0 2.666667vw;
    margin: 4vw auto;
    position: relative;

    .tip {
      position: absolute;
      right: 2vw;
      top: 2vw;

      img {
        display: block;
        width: 6vw;
      }
    }

    &.updata-file {
      justify-content: space-between;
      align-items: center;

      > .delete {
        color: #333;
        font-size: 16px;
        height: 11.2vw;
        line-height: 11.2vw;
        width: 12vw;
        text-align: center;
        position: absolute;
        top: 0;
        right: 9vw;

        &.hidden-delete {
          visibility: hidden;
        }
      }

      p {
        display: inline-block;
        width: 60vw;
        height: 100%;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
      }

      input[type="text"] {
        width: 100%;
        border: none;
        font-size: 16px;
        color: #333;
      }
      .title {
        padding: 0;
        background-color: transparent;
      }
      // 修改input的placeholder颜色
      input::-webkit-input-placeholder {
        color: #333;
      }
    }
  }

  .tip-m {
    width: 82.666667vw;
    margin:  0 auto;
    font-size: 12px;
    color: #666;
  }

三、 通过fromdata上传接口

submit() {
  this.info = {
    meeting_id: this.meeting.id,
    url: this.videoFile,
    image: this.imgFile
  };
  const formdata = new window.FormData();
  for (const k in this.info) {
    if (this.info[k] === "" || this.info[k] == null) {
      this.$toast("所有选项为必填");
      return;
    }
    formdata.append(k, this.info[k]);
  }
  
  this.$http.addVideo(formdata)
    .then((r) => {
      if (parseInt(r.code) !== 1) {
        this.$toast(r.msg);
        return;
      }
      this.$toast("上传成功");
      this.$router.back();
    })
    .catch((e) => {
      console.error(e);
    });
},