关于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的萌新,有用请点个赞