web service design log

recently been doing some web site front end design and have  learned something about photoshop, neat technology and I'm rather intrigued ..


### 在 Vue 中使用 Ant Design 实现视频压缩功能 为了在 Vue 项目中集成 Ant Design 并实现视频压缩功能,需综合考虑前端文件处理能力和后端服务的支持。以下是具体实现方式: #### 安装依赖库 首先,在项目根目录下安装必要的 npm 包来支持视频操作以及与 Ant Design 的兼容性。 ```bash npm install ant-design-vue axios video.js fluent-ffmpeg --save ``` `fluent-ffmpeg` 是一个用于执行 FFmpeg 命令行工具的 Node.js 库,可以帮助完成视频编码转换和剪辑等任务;而 `video.js` 则提供了播放器组件以便更好地预览待上传视频[^1]。 #### 创建 VideoCompress.vue 组件 定义一个新的单文件组件用来封装整个流程逻辑,包括但不限于选择本地媒体文件、展示进度条状态指示、触发后台异步请求等交互行为。 ```html <template> <div id="app"> <!-- 文件拖拽区域 --> <a-upload-dragger name="file" :multiple="false" @change="handleChange" accept=".mp4,.avi,.mkv" > <p class="ant-upload-drag-icon"><inbox-outlined /></p> <p class="ant-upload-text">点击或将视频文件拖至此处</p> </a-upload-dragger> <!-- 进度条显示区 --> <a-progress v-if="percent !== undefined" :percent="percent" status="active"/> <!-- 提交按钮 --> <a-button type="primary" @click="submitVideo()" :loading="isLoading">{{ isLoading ? '正在提交...' : '开始压缩并上传' }}</a-button> <!-- 错误提示框 --> <a-alert v-show="errorMessage.length>0" message="" description="" /> </div> </template> <script lang="ts"> import { defineComponent, ref } from "vue"; import ffmpeg from "fluent-ffmpeg"; export default defineComponent({ setup() { const file = ref<File | null>(null); const percent = ref<number>(); const errorMessage = ref<string>(""); function handleChange(info: any): void { if (info.file.status === "uploading") return; if (!info.fileList || info.fileList.length <= 0) return; // 获取选中的第一个文件作为目标对象 file.value = info.file.originFileObj as File; // 清除之前的错误信息 errorMessage.value = ""; } async function submitVideo(): Promise<void> { try { if(!file.value){ throw new Error("请选择要上传的视频"); } // 初始化FFmpeg实例 let command = ffmpeg(file.value); // 设置输出参数(可根据实际需求调整) command.outputOptions([ '-vf scale=hd720', '-b:v 500k' ]); // 添加事件监听器监控压缩过程 command.on('progress', ({ timemark }) => { console.log(`Processing ${timemark}`); // 更新UI上的百分比数值 percent.value = Math.floor((parseInt(timemark.split(":")[0]) * 60 + parseInt(timemark.split(":")[1])) / durationInSeconds * 100); }); // 执行命令并将结果保存到临时位置 await command.saveToFile('/tmp/output.mp4'); // 发送HTTP POST 请求至服务器API endpoint await fetch("/api/video/compress",{ method:"POST", body:new FormData().append("compressed_video", fs.createReadStream('/tmp/output.mp4')) }); alert("视频已成功压缩并上传!"); } catch(error:any){ errorMessage.value = error.message; } } return { file, percent, errorMessage, handleChange, submitVideo }; }, }); </script> ``` 此代码片段展示了如何利用 Ant Design 和 Ffmpeg 来创建一个简单的视频压缩应用界面,并通过 Axios 或 Fetch API 将经过压缩后的视频发送给远程 Web Service 处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值