H5项目使用@microsoft/fetch-event-source

前言:

        在@microsoft/fetch-event-source 文档中,没有介绍在项目中使用script 引入,只介绍了通过npm 引入的方式;项目的接口又是 post 方式的流式接口。

解决方式:

        借助 webpack 工具

实现步骤:

1、初始化包管理文件

npm install
//或
cnpm install

 2、安装 webpack 和 webpack-cli 编译器

npm install webpack --save-dev
npm install webpack-cli --save-dev

 3、新建 webpack.config.js 文件

const path = require("path");

module.exports = {
  entry: "./test.js", //打包入口
  output: {
    //打包文件输出路径
    path: path.resolve(__dirname, "dist"),
    filename: "index.js",
  },
};

注:代码中 test.js 文件是使用了 @microsoft/fetch-event-source,打包入口文件需根据自己项目文件路径填写!!

test.js 文件

 4、在项目终端 执行 npx webpack

npx webpack

 5、执行 npx webpack 进行项目打包后,把打包生成的 文件 (index.js) 在 项目中引入

 到这里就已经结束了!项目中也已经成功使用了@microsoft/fetch-event-source !!!

### HTML5 中实现视频文件上传 #### 使用 `<input>` 元素进行基本视频上传 HTML5 提供了一个简单的方法来允许用户选择并上传文件,包括视频文件。通过使用带有 `type="file"` 属性的 `<input>` 元素可以创建一个文件选择器。 ```html <input type="file" accept="video/*"> ``` 此代码片段会呈现给用户一个按钮用于浏览本地存储设备上的媒体资源,并限定只接受视频类型的文件[^1]。 #### 利用 AJAX 进行异步提交 为了不刷新整个页面而完成文件传输操作,可以通过 JavaScript 的 XMLHttpRequest 对象发起 POST 请求向服务器发送所选文件的数据流: ```javascript const input = document.querySelector('input[type=file]'); input.addEventListener('change', function(event){ const file = event.target.files[0]; let formData = new FormData(); formData.append("myFile", file); fetch('/upload-endpoint', { method: 'POST', body: formData, }) .then(response => response.json()) .then(data => console.log(data)); }); ``` 这段脚本监听文件输入框的变化事件,在检测到新文件被选定之后构建表单数据对象并将之作为主体内容传递给指定 URL 地址的服务端接口处理程序。 #### 配合 Element UI 组件库增强用户体验 对于基于 Vue.js 构建的应用来说,Element UI 是一款非常流行的前端框架之一。其内置有专门针对文件上传场景设计好的组件——`el-upload`,它不仅支持常规的小型文件传送还能够很好地适配大型多媒体资料(比如高清影片)的高效上载需求[^2]。 下面是一个简单的例子展示了怎样利用该插件快速搭建起具备实时预览能力以及进度跟踪特性的视屏素材管理界面: ```vue <template> <div class="app-container"> <!-- Video Upload --> <el-upload :headers="headers" action="/api/uploadVideo" list-type="picture-card" :on-preview="handlePreview" :before-upload="beforeUpload" :on-success="handleSuccess" :on-error="handleError" :on-progress="handleProgress" ref="uploadRef" > <i slot="default" class="el-icon-plus"></i> <div v-if="videoUrl" slot="tip">当前已上传</div> </el-upload> <!-- Preview Dialog --> <el-dialog :visible.sync="dialogVisible"> <video width="100%" controls autoplay> <source :src="videoUrl"/> </video> </el-dialog> </div> </template> <script> export default { name: "VideoUploader", data(){ return{ videoUrl:'', dialogVisible:false, headers:{}, fileList:[] } }, methods:{ handlePreview(file){ this.videoUrl = file.url; this.dialogVisible=true; }, beforeUpload(file){ // Add custom validation logic here. return true; }, handleSuccess(res,file){ this.$message({ message:'上传成功!',type:'success'}); this.fileList.push({...file,response:res}) }, handleError(err,file){ this.$message.error(`上传失败 ${err.message}`); }, handleProgress(event, file){ console.info(`${file.name} is uploading...`,event.percent); } } } </script> ``` 上述模板定义了一个包含图片卡片样式的上传区域,当点击空白处时触发浏览器默认行为弹出对话框让用户挑选想要分享的内容;一旦选择了某个具体的项,则自动启动后台任务负责实际搬运工作直至结束为止。期间如果遇到任何异常情况都会及时反馈提示信息告知使用者具体情况以便采取相应措施加以应对[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值