vue+elemeui上传文件

下面展示一些 内联代码片。

  <el-form-item label="" prop="videoUrl" class="video-url">
            <el-upload v-loading="loading" class="upload-demo" drag :limit="1" :action="''" list-type="picture-card" ref="upload" :before-upload="upload" :format="['mp4','avi','mov','rmvb','3GP']" accept="video/*" multiple :on-success="uploadSuccess" :on-error="uploadError">
              <img :src="list.videoUrl+'?x-oss-process=video/snapshot,t_5000,m_fast,h_331,w_590'" v-if="list.videoUrl" alt="" srcset="">
              <div class="po_r" v-else>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip c999" slot="tip">只能上传mp4,avi,mov,rmvb,3GP文件，且视频时长不超过 60 分钟，大小不超过 2 GB</div>
              </div>
              <Input v-model="list.videoUrl" disabled style="width: 120px;margin-top:24px" class="h"></Input>
            </el-upload>
            <div class="mobile-up" v-show="screenWidth > 750" @click="isShowDia">
              <div class="mobile-info">
                <span id="qrcodes" v-show="qrShow" class="pcode mar_t30  in_blck" ref="qrcodes"></span>
                <i v-show="!qrShow" class="el-icon-upload"></i>
                <p>手机上传</p>
              </div>
            </div>

          </el-form-item>

  		 this.loading = true;
      let splic = file.name.split(".");
      Vue.set(this.list, "title", splic[0]);
      if (
        splic[splic.length - 1] == "mp4" ||
        splic[splic.length - 1] == "avi" ||
        splic[splic.length - 1] == "mov" ||
        splic[splic.length - 1] == "rmvb" ||
        splic[splic.length - 1] == "3GP"
      ) {
        if (file.size > 209715200) {
          this.$Message.info("视频大小不能超过200M");
          return false;
        }
        //获取视频时长
        let videoUrl = URL.createObjectURL(file);
        let audioElement = new Audio(videoUrl);
        audioElement.addEventListener("loadedmetadata", () => {
          let duration = parseInt(audioElement.duration); //时长为秒，小数，182.36
          duration = this.$all.s_to_hs(duration); //秒转换成分钟
          this.list.videoTime = duration;
        });
        //上传文件时根据用户ID生成文件名 file类型不支持修改 只有新建一个file对象
        let files = new File( [file],this.userInfo.id + new Date().getTime() +"." + splic[splic.length - 1]);
        let params = new FormData();
        params.append("file", files);
        //这里拿到文件files直接传给后台就OK了