关于antd上传视频无法预览提供一种思路

关于antd上传视频无法预览提供一种思路
使用upload上传视频时,预览按钮是灰色的无法点击,并且没有缩略图,我这边的解决方法是,自定义一个预览,点击预览时,直接跳转到另一个页面,缩率图可以使用一张网图从网上或者是直接存储在服务器上的。
handlePreviewFile(file) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
const dataUrl = e.target.result;
resolve(“https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3498227956,2363956367&fm=26&gp=0.jpg”)
}
})
}
在upload中previewFile={this.handlePreviewFile},此时视频的预览的小眼睛就可以点击了,resolve中的是我上传的一张网图,也就是用于替换视频的缩略图。
在state中定义previewVideoUrl
在beforeupload中获取视频的地址
const url = URL.createObjectURL(file)
this.setState(state => ({
previewVideoUrl:url,
}))

handlePreviewVideo =()=> {
const files=this.state.previewVideoUrl
window.open(files)
};
最后在upload中 onPreview={this.handlePreviewVideo}
此时就可以看到缩略图了,也能点击预览跳转页面播放视频。
来自刚学react的萌新,有用请点个赞

  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值