vue+vant h5页面的上传视频问题

Question

h5 页面 vue vant库 上传视频 展示问题

<van-field label="上传作品" required>
     <template #input>
         <van-uploader v-model="fileUrl" 
            :after-read="afterRead"  
            accept="video/*" 
            capture="camera"
            :max-count="1" 
            multiple >
            <template #preview-cover="{ file }">
                  <video  width="100%" type="video/mp4" 
                    :src="file.url" 
                    muted="muted" 
                    preload="preload" 
                    controls="controls" >
                </video>
            </template>
        </van-uploader>
     </template>
</van-field>


methods:{
    afterRead(file){
        var formDate = new FormData();
        formDate.append('file',file.file);
        this.newForm.FileName = file.file.name//保存上传文件名
        getUpload(formDate).then(res=>{
            this.newForm = res;
        })
    },
}

展示的时候这个地方时没有调接口返回的url地址的, 然后就想着在上传之前也掉一遍:before-read="beforeRead" , 就拿到地址了 , 结果这个视频组件都没显示出来

怎么样把这个上传后的视频展示出来

Answer 1

已经找到方法了把
#preview-cover="{ file }"
这个换成
slot="preview-cover"
就行了

Answer 2

文件是有 file.url 的嘛？

看上去你用作的是上传前预览文件，这个时候你需要自己构建一个 bloburl，用 URL.createObjectURL

我这里有个非 vant 的上传前预览

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。