el-upload上传视频没有封面

Posted 2023-05-03

参考技术A （上传图片—>显示图片、上传pdf文件—>pdf封面图片、其他格式文件采用相同方法）
原因讲解：由于el-upload展示封面时根据file-list参数中的url字段来进行展示的，所以我们在处理数据的时候我们将其中的url替换成自己想要的封面图片，然后将实际的文件路径存放到另一个自定义字段里面就好，这里我的自定义字段为“realurl“ 参考技术B 由于el-upload展示封面时根据file-list参数中的url字段来进行展示的，所以我们在处理数据的时候我们将其中的url替换成自己想要的封面图片，然后将实际的文件路径存放到另一个自定义字段里面就好，这里我的自定义字段为“realurl“ 参考技术C 由于el-upload展示封面时根据file-list参数中的url字段来进行展示的，所以我们在处理数据的时候我们将其中的url替换成自己想要的封面图片，然后将实际的文件路径存放到另一个自定义字段里面就好，这里我的自定义字段为“realurl“ 参考技术D 由于el-upload展示封面时根据file-list参数中的url字段来进行展示的，所以我们在处理数据的时候我们将其中的url替换成自己想要的封面图片，然后将实际的文件路径存放到另一个自定义字段里面就好，这里我的自定义字段为“realurl“ 第5个回答  2022-11-10 上传图片—>显示图片、上传pdf文件—>pdf封面图片、其他格式文件采用相同方法）
原因讲解：由于el-upload展示封面时根据file-list参数中的url字段来进行展示的，所以我们在处理数据的时候我们将其中的url替换成自己想要的封面图片，然后将实际的文件路径存放到另一个自定义字段里面就好，这里我的自定义字段为“realurl“

el-upload怎么拿到上传的图片的base64格式

这里只是本地上传，拿图片的base64，并不向后台直接上传，拿到base64后手动上传

上传前效果：

上传后效果：

 

 .vue

　　　　　　　<el-form-item label="礼品封面">
              <el-upload
                class="avatar-uploader"
                action=""
                :show-file-list="false"
                :auto-upload="false"
                :on-change="changeFile">
                <img id="giftImg" v-if="imageUrl" :src="imageUrl" class="avatar">
                <el-button v-else slot="trigger" size="small" type="primary">选取文件</el-button>
              </el-upload>
            </el-form-item>

 

.ts

  changeFile(file, fileList) {
    var This = this;
    //this.imageUrl = URL.createObjectURL(file.raw);
    var reader = new FileReader();
    reader.readAsDataURL(file.raw);
    reader.onload = function(e){ 
        this.result // 这个就是base64编码了
        This.imageUrl = this.result;
    }
  }

 

 有些东西就是试出来的，然后总结，~~~