请教前端大佬： Vue 项目 demo，用了 Vant 组件，使用的是 van-uploader，我想实现：选择好视频后，想截取视频，然后再进行上传，应该怎么写呢？
ChatGPTPRO · 2023-10-16 11:15:52 +08:00 · 1134 次点击这是一个创建于 430 天前的主题，其中的信息可能已经有所发展或是发生改变。
以下是我的代码。
<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>
大佬们，就像这样，选了视频后，能够截取视频，然后上传
<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>
大佬们，就像这样，选了视频后，能够截取视频，然后上传
8 条回复 • 2023-10-16 20:00:49 +08:00
 |
1
liangtao927190 2023-10-16 11:23:03 +08:00  1
没理解错的话。。。可以在 beforeRead 这个函数里去异步的执行裁剪相关的操作。裁剪完毕后，赋值新的视频给 fileList ，返回 resolve()即可。
|
 |
2
codeself 2023-10-16 11:24:08 +08:00 1
思路是这个,找 gpt 给你写具体的实现就行了
1. van-uploader 只用于文件选择 2. 到 npm 找个可以截取视频的包 3. 把截取视频的结果转成 blob 4. 通过 new FormData 的形式把你的 blob 传给后端即可 |
 |
3
1156909789 2023-10-16 11:24:36 +08:00
那得塞个 ffmpeg 进去吧
|
 |
4
ChatGPTPRO OP |
|
5
ChatGPTPRO OP 大佬，像我上面发的图片中，这种进度选择条然后截取的，请问您知都不知道是不什么框架的啊？
找了一圈发现，vedio.js 只支持播放，videojs-record 只支持干录制，不能选取的 |
 |
6
NikoXu 2023-10-16 16:40:00 +08:00
前端还能干这种事情 ?
|
 |
7
webszy 2023-10-16 19:58:23 +08:00
抖音上有个渡一前端好像讲过
|
|
8
webszy 2023-10-16 20:00:49 +08:00
还是需要 ffmpeg ，浏览器端需要 wasm ，要不然就是后端
|
Select Language