请教前端大佬： Vue 项目 demo，用了 Vant 组件，使用的是 van-uploader，我想实现：选择好视频后，想截取视频，然后再进行上传，应该怎么写呢？

[ChatGPTPRO]

以下是我的代码。


<van-uploader :preview-full-image="false" result-type="file" accept="video/*" :max-count="1" v-model="videoCovers"
:after-read="afterRead" @delete="onDeleteFile">
<template #preview-cover="{ file }">
<van-uploader class="preview-cover" :after-read="onUploadCover" style="display: flex;justify-content: center;">
<div>选封面</div>
</van-uploader>
</template>
</van-uploader>


大佬们，就像这样，选了视频后，能够截取视频，然后上传

[JimmyRogue]

没理解错的话。。。可以在 beforeRead 这个函数里去异步的执行裁剪相关的操作。裁剪完毕后，赋值新的视频给 fileList ，返回 resolve()即可。

[codeself]

思路是这个,找 gpt 给你写具体的实现就行了

1. van-uploader 只用于文件选择
2. 到 npm 找个可以截取视频的包
3. 把截取视频的结果转成 blob
4. 通过 new FormData 的形式把你的 blob 传给后端即可

[1156909789]

那得塞个 ffmpeg 进去吧

[ChatGPTPRO]

@codeself
@liangtao927190 非常感谢两位大哥！

[ChatGPTPRO]

大佬，像我上面发的图片中，这种进度选择条然后截取的，请问您知都不知道是不什么框架的啊？
找了一圈发现，vedio.js 只支持播放，videojs-record 只支持干录制，不能选取的

[NikoXu]

前端还能干这种事情 ?

[webszy]

抖音上有个渡一前端好像讲过

[webszy]

还是需要 ffmpeg ，浏览器端需要 wasm ，要不然就是后端