vue项目中图片&视频上传后的信息处理

1.element upload组件

<el-upload
              action="/dsp/api/file/upload"
              :show-file-list="false"
              :on-success="(file, fileList) => handlesuccess(file, fileList)"
              :before-upload="(file, fileList) => handlebefore(file, fileList)"
            >
              <el-button size="small" type="primary">上传文件</el-button>
              <div slot="tip" class="el-upload__tip">
                尺寸1920x1080，大小1MB以内的文件
              </div>
            </el-upload>  
复制代码

2.获取视频相关属性

width&height&大小（借用promise异步处理）

getVideoMsg(file) {
    return new Promise((resolve) => {
      let videoElement = document.createElement("video");
      videoElement.src = URL.createObjectURL(file);
      videoElement.addEventListener("loadedmetadata", function() {
        resolve({
          duration: videoElement.duration,
          height: videoElement.videoHeight,
          width: videoElement.videoWidth,
        });
      });
    });
  },
  
复制代码

3.获取图片相关属性

宽&高&大小（利用箭头函数直接赋值获取处理）

   getimage(file){
     let reader = new FileReader();
       reader.onload = (event) => {
         let txt = event.target.result;
         let img = document.createElement("img");
         img.src = txt;
         img.onload = ()=>{
           this.ruleForm.width = img.width;
           this.ruleForm.height = img.height;
           this.ruleForm.size = file.size;
         };
       };
       reader.readAsDataURL(file);
   },
复制代码

4.因为我们项目是上传云端的，所以在上传之前会获取和处理信息

 handlebefore(file) {
     let type = file.type.split("/")[0];
     this.ruleForm.format=file.type.split("/")[1]
     // 1048576
     if (type == "video") {
       this.getVideoMsg(file).then((videoinfo) => {
         const { duration, height, width } = videoinfo;
         //获取到视频的时长,高度,宽度
         this.ruleForm.width = width;
         this.ruleForm.height = height;
         this.ruleForm.size = file.size;
         this.ruleForm.videoLength = duration;
       });
     } else if (type == "image") {
       this.getimage(file)
     } else {
       this.msg.selectype = "请上传图片或视频";
       return false;
     }
     // console.log(file,this.ruleForm);
   },
复制代码