js和nodejs如何将文件切片和合并

这篇具有很好参考价值的文章主要介绍了js和nodejs如何将文件切片和合并。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 nodejs进行文件切片合并

使用nodejs读取文件流,并对流进行切片合并等操作,就需要用到Buffer对象,可对文件流进行切片,并合并。

const fs = require('fs')


// 读取一个文件,使用fs读取文件获取一个Buffer类型数据
const buffer = fs.readFileSync('./test.mp4')

// 将文件进行切分
const file1 = buffer.subarray(0,3000000)
const file2 = buffer.subarray(3000000)

// 全并多个切片文件
const allfile = Buffer.concat([file1,file2])


// 读取文件切片
const s1 = fs.readFileSync('./test_s1.mp4')
const s2 = fs.readFileSync('./test_s2.mp4')

// 将读取的文件切片合并
const bb = Buffer.concat([s1,s2])

// 将合并的切片数据,写到一个新文件中
fs.writeFileSync('./test2.mp4',bb)

 js进行文件切片合并

如果想在页面上操作文件,就需要使用到与文件相关的API接口,如Blob、File、FileList、FileReader、FileReaderSync,这几个就是操作文件常见的接口。

Blob是实现文件切片的一个核心接口,因为它是一个不可变的类文件对象,可以使用Blob本身的slice方法,对文件本身进行切片。文章来源地址https://www.toymoban.com/news/detail-652349.html

<html lang="zh-cn">

<head>
    <meta title="文件切片合并" />
</head>

<body>
    <!-- 页面选择文件 -->
    <input type="file" id="file"/>
    <!-- 将加载的视频文件进行切片后合并,并播放 -->
    <video id="play" controls style="width:500px;height:auto"></video>
</body>
<script>
    file.addEventListener('change',async (e)=>{
        // 获取FileList中的File文件
        let file2 = file.files[0]

        // ----------第一种方式-------------------
        // 使用Blob的slice方法切片,使用Blob构造函数进行数据合并
        // 将加载的文件进行切片
        // let s1 = file2.slice(0,100)
        // let s2 = file2.slice(100)

        // 将切片的文件进行数据合并
        // let newFile = new Blob([s1,s2])
        

        // -----------第二种方式------------------
        // 如何对大文件进行流式读取
        let chunckArr = []

        // 通过Blob获取 ReadableStream 流对象,再获取可读的流读取器
        let reader =  file2.stream().getReader()
        let done = false
        while(!done){
            // 使用流读取器的read方法,获取流队列中的下一个分块数据
            let {value,done: readDone} = await reader.read()
            console.log(value)
            chunckArr.push(value)
            done = readDone
        }
        // 通过Blob构造函数合并流数据
        let newFile = new Blob(chunckArr)
        
        // 进行页面播放
        play.setAttribute('src',URL.createObjectURL(newFile))
    })

</script>
</html>

到了这里,关于js和nodejs如何将文件切片和合并的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 一次理清前端文件上传操作(单个,多个,大文件切片)

    相信大家在工作中也会遇到前端文件上传的需求,虽然已经在项目中使用FormData和elementUI中upload组件都实现过类似上传效果,但自己对这块一直一知半解,因此做一个笔记梳理一下前端方面的文件上传操作,以供日常参考。 总体来说常用的两种方式:二进制传输和base64格式直

    2024年02月03日
    浏览(53)
  • JS-27 前端数据请求方式;HTTP协议的解析;JavaScript XHR、Fetch的数据请求与响应函数;前端文件上传XHR、Fetch;安装浏览器插件FeHelper

    早期的网页都是通过后端渲染来完成的,即服务器端渲染(SSR,server side render): 客户端发出请求 - 服务端接收请求并返回相应HTML文档 - 页面刷新,客户端加载新的HTML文档; 服务器端渲染的缺点: 当用户点击页面中的某个按钮向服务器发送请求时,页面本质上只是一些数

    2024年02月16日
    浏览(68)
  • [从零开发JS应用] 如何在VScode中配置Javascript环境,常见的调试方法有哪些?

    记录环境配置:本文配置的环境主要针对单独JS文件的断点调试,主要是为了调试LeetCode里面的代码。 首先在官网下载对应的版本:https://nodejs.org/en/ 开始安装,可以自定义选择安装路径。 这里 选择Add Path ,系统变量会自动设置,但是用户变量并没有自动设置,需要的话可以

    2024年02月04日
    浏览(56)
  • 【前端面试】中大文件上传/下载:中等文件代理服务器放行+大文件切片传输+并发请求+localstorage实现断点续传

    目录 切片上传~spark-md5 原理:流式计算+分块处理 文件标识spark-md5:A-B A.切片哈希值合并 B.首尾切片+其他切片前中后各取2M 计算hash:A-B(参考React的Fiber架构) A.线程:web-worker B.空闲:requestIdleCallback 异步并发控制:A-B(参考http2的多路复用) A.promise.allSettled() B.并发数max=

    2024年02月12日
    浏览(56)
  • 【Nodejs】Node.js开发环境安装

    在命令窗口中输入 node -v 可以查看版本 0.x 完全不技术 ES6 4.x 部分支持 ES6 特性 5.x 部分支持ES6特性(比4.x多些),属于过渡产品,现在来说应该没有什么理由去用这个了 6.x 支持98%的 ES6 特性 8.x 支持 ES6 特性 去 Node.js 的官网下载安装包: 我们也可以下载历史版本。 后续如果

    2024年02月15日
    浏览(76)
  • vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法

    由于vue为单页面项目,通过控制组件局部渲染,main.js是整个项目唯一的入口,整个项目都在一个index.html外壳中。 若项目过大,会造成单页面负载过重;同时,多页面利于模块独立部署。 如果项目中不同的页面需要不同的main.js和App.vue这样就需要配置多个入口了。 要单独将页

    2024年01月22日
    浏览(90)
  • 纯前端 —— 200行JS代码、实现导出Excel、支持DIY样式,纵横合并

    前期回顾 Vue3 + TS + Element-Plus 封装Tree组件 《亲测可用》_vue3+ts 组件封装-CSDN博客 https://blog.csdn.net/m0_57904695/article/details/131664157?spm=1001.2014.3001.5501 目录 具体思路: 1. 准备HTML结构 2. 定义CSS样式 3. 初始化表格数据 4. 创建表格函数createTable 5. 将表格添加到页面中 6. 导出表格为E

    2024年02月02日
    浏览(39)
  • jQuery.js - 前端必备的Javascript库

    作者: WangMin 格言: 努力做好自己喜欢的每一件事 jQuery.js 是什么? jQuery是一个快速简洁、免费开源易用的JavaScript框架, 倡导写更少的代码,做更多的事情 。它封装JavaScript常用的功能代码,提供了一种简便的JavaScript设计模式,以及我们开发中常用到的操作DOM的API,优化HTML文

    2024年02月05日
    浏览(77)
  • 【前端】关于如何将html、js、css等一个html网页打包成单一的exe可执行程序文件

    要将 HTML、JS、CSS 等一个 HTML 网页打包成单一的可执行程序文件(exe),通常需要使用一些工具和框架来实现的。 这里以Electron为例,详细说一下具体的打包过程 1.安装依赖: 确保已经安装了 Node.js。在命令行中进入你的项目目录,执行以下命令安装 Electron: 2.创建文件结构

    2024年02月11日
    浏览(57)
  • web前端框架JS学习之JavaScript类型转换

    vascript有多种数据类型,如字符串、数字、布尔等,可以通过typeof语句来查看变量的数据类型。数据类型转换就是数据类型之间相互转换,比如把数字转成字符串、把布尔值转成字符串、把字符串转成数字等,这在工作也是经常碰到的。 本期我们就给大家说说web前端框架JS学

    2024年02月10日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包