利用fileReader上传文件

上传文件

上传文件利用fileReader获取图片和视频的base64格式传递给后台，后台返给前端一个服务器的临时地址

<el-radio-group v-model="list.resource" @change="changeResFile()">
     <el-radio label="图片"></el-radio>
     <el-radio label="视频"></el-radio>
</el-radio-group>
<span class="fileItem" style="margin-left:25px;">
   本地上传
    <input
        type="file"
        id="fileId"
        ref="fileId"
        title
        @change="getFile($event)"
    />
</span>
//elemenui进度条组件
<el-progress
    :stroke-width="8"
    :percentage="progressPercent"
    v-if="loading"
    style="margin-top:10px"
></el-progress>

js

getFile(e) {
       const rLoading = this.openLoading();
       var file = e.target.files[0];
       var reader = new FileReader();
       reader.readAsDataURL(file);
       reader.onloadstart = evt => {
           this.progressPercent = 0;
           this.loading = true;
       };
       //监听进度条事件
       reader.onprogress = evt => {
           this.progressPercent = Number(((evt.loaded / evt.total) * 100).toFixed(2));
       };
       reader.onloadend = () => {
           var base64data = reader.result;

           // 下面逻辑处理（后台接口地址）
           let params = {
               data: base64data
           };
           postUpFile(params).then(res => {
               let { ReturnCode, Data } = res;
               if (ReturnCode == 200) {
                   setTimeout(() => {
                       this.loading = false;
                   }, 1000);
                   let DataUrl = Data.Url;
                   rLoading.close();

                   // gif|jpg|jpeg|png|bmp|GIF|JPG|PNG
                   let reg2 = /\.(jpeg|jpg|png|PNG)+$/;
                   if (reg2.test(DataUrl)) {
                       // 判断图片多少M
                       var size = file.size / 1024;
                       if (size > 1024) {
                           
                           this.$message.warning("图片超过1M");
                           return;
                       }

                       this.list.FileType = 1;
                       this.list.FileSrc = DataUrl;
                       this.list.resource = '图片';
                   } else if (/\.(mp4)$/.test(DataUrl)) {
                       // 判断视频多少 20M
                       var size = file.size / 1024;
                       if (size > 20480) {
                           // 视频超过20M
                           this.$message.warning("视频超过20M");
                           return;
                       }

                       // 获取上传的视频的宽高
                       let vdoxx = DataUrl;
                       var videoObj = document.getElementById('myVideo');
                       videoObj.onloadedmetadata = evt => {
                           URL.revokeObjectURL(vdoxx);
                           if (videoObj.videoWidth / videoObj.videoHeight != 4 / 3) {
                              
                               this.$message.warning("视频尺寸比例为640*480");
                               this.list.FileSrc = '';
                               videoObj.src = '';

                               return false;
                           }
                       };

                       this.list.FileType = 2;
                       this.list.FileSrc = DataUrl;
                       ***let vdo = document.getElementById('myVideo');
                       vdo.src = DataUrl;
                       vdo.pause();***    //从后台获取的视频路径需要初始化才能显示出来
                       this.list.resource = '视频';
                   } else {
                       this.$message.warning("不支持的格式，请重新上传");
                       return false;
                   }
               } else {
                   rLoading.close();
                   setTimeout(() => {
                       this.loading = false;
                   }, 1000);
               }
           });
           rLoading.close();
           document.getElementById('fileId').value = '';
           //注意：如果反复上传同一个文件，需要重新触发上传文件的change事件，需要把文件中的值清空就可以触发了
       };
   },