建设项目竣工验收网站,沧州什么网最好,整合营销传播的方法包括,昆明网站设计报价背景
需求场景#xff1a;
后台管理系统#xff1a;
#xff08;1#xff09;配置中支持上传视频、上传成功后封面缩略图展示#xff0c;点击后自动播放视频#xff1b;
#xff08;2#xff09;配置中支持上传多个文件#xff1b;
前台系统#xff1a;
#…
背景
需求场景
后台管理系统
1配置中支持上传视频、上传成功后封面缩略图展示点击后自动播放视频
2配置中支持上传多个文件
前台系统
1展示视频列表并点击播放
2展示文件列表并点击下载 说明
看需求似乎很简单再加上本身antd-design已经封装好的Upload组件功能强大且丰富但是具体需求场景中还是有不少交互细节也花了一些时间调试为以后碰到类似场景更快速高效实现记录和分享出来 上传视频且展示缩略图
上传视频处理
获取视频数据并执行上传方法一般二进制处理可以支持各类文件格式本质视频也是文件的一种格式这一步其实很简单参考Upload组件的相关实例即可
Uploadmultiple{true}fileList{videoList}listTypepicturebeforeUpload{(file) {const formData new FormData();formData.append(file, file, file.name);request(/upload/binary, {method: post,body: formData,}).then((res: any) {setVideoList([...videoList,{name: file.name,url: res.data,thumbUrl: ${res?.data},},]);});}}className{styles[upload-list-inline]}
Button icon{UploadOutlined /}上传视频/Buttonspan className{styles[upload-tip]}仅支持 rm,rmvb, wmv,avi, mpg, mpeg,mp4等格式单个视频最大不得超过500M。/span
/Upload 上述代码listType字段设为“picture”实例效果如下 前台展示列表demo代码如下
div classNameintroductiondiv classNameapp-message-title视频教程/div{videoList.map((item: FileProps, index: number) {return (div key{index} onClick{() handleVideo(item)}imgclassNamevideo-iconsrc{require(icon.png)}/{/* a href{item.url} classNamefile-name{item.name}/a */}span classNamefile-name{item.name}/span/div);})}
/div 1实现代码如下被注释掉的代码交互效果点击直接新开页 上传的不同尺寸播放时按原视频的宽高 缺点新开页打开不利于用户操作
2点击后弹窗展示实现思路是使用antd的Modal组件承载视频播放组件
Modalwidth{curVideo.width}bodyStyle{{ height: curVideo.height }}wrapClassNamevideo-modalfooter{null}visible{visible}onCancel{() {setCurVideo(undefined);setVisble(false);}}
video src{curVideo.url} controls preloadauto autoPlay{true} /
/Modal 这里其实有一个问题因为上传时不显示视频上传的像素那么弹窗的宽高需要与视频的框高相同所以上传的时候需要拿到视频的宽高如何拿到视频宽高
Uploadmultiple{true}fileList{videoList}listTypepicturebeforeUpload{(file) {console.log(fiel , file);const videoUrl URL.createObjectURL(file);const videoObj document.createElement(video);videoObj.onloadedmetadata function () {URL.revokeObjectURL(videoUrl);console.log(JJJJJ, videoObj.videoWidth, videoObj.videoHeight); // 拿到视频的宽高// 执行上传的方法获取外网路径上传进度等const formData new FormData();formData.append(file, file, file.name);request(/upload/binary, {method: post,body: formData,}).then((res: any) {setVideoList([...videoList,{name: file.name,url: res.data,thumbUrl: ${res?.data}, // 缩略图图片地址width: videoObj.videoWidth, height: videoObj.videoHeight,},]);});};videoObj.src videoUrl;videoObj.load();}}className{styles[upload-list-inline]}
Button icon{UploadOutlined /}上传视频/Buttonspan className{styles[upload-tip]}仅支持 rm,rmvb, wmv,avi, mpg, mpeg,mp4等格式单个视频最大不得超过500M。/span
/Upload
这样就解决了Modal弹窗承载视频播放Modal弹窗的宽高与视频的宽高一致
