Filereader.read AsArray Buffer

下方代码运行环境非原生环境，是基于Vue2 + Element-UI的。 但别担心，因为实现方法完全基于原生JS实现，你完全可以直接拿过去任意JS项目使用。而我，只是用了export导出一下方法而已。 就是Async/await、Promise 一、准备视频文件或远程地址 准备好可以正常访问的视频素材： （1）视频文件。使用input上传的File类型的文件 （2）远程地址。blob地址、http地址、本地路径等 二、视频处理 想必大家在网上搜半天了，发现几乎都是基于页面已有的video标签来直接处理的，那么接下来我将反其道而行之，在不实际添加DOM的情况下使用视频。 （1）视频文件 const generateVideoFileBlobUrl = (file) => { return new Promise((resolve, reject) => { let fileReader = new FileReader(); fileReader.onload = e => { let blob = new Blob([e.target.result]);...

实现的效果： 1、多个大文件（支持10个G以上）分片上传 2、进度条展示进度 3、控制文件上传暂停和取消 实现关键点： 1、文件预处理（md5计算、请求和进度处理等） 2、分片上传的流程（查询已上传分片、文件合并等） 3、文件的暂停、开始、取消 文件预处理 首先使用file类型的input框获取文件，对文件进行深拷贝，再清空input的value值（防止input的change事件不被触发）。 let files = e.target.files; let copiedFiles = [] for(let i = 0; i < files.length; i++){ copiedFiles.push(new File([files[i]], files[i].name, { type: files[i].type })) } this.$emit("bigFileChange", copiedFiles); this.$refs.input.value = null;...

const CHUNK_MD5_SIZE = 50 * 1024 * 1024; // MD5 分片大小 // 使用 spark-md5 import SparkMD5 from "spark-md5"; function getFilesSparkMd5(file) { return new Promise((resolve, reject) => { let currentPosition = 0; // 当前读取位置 const fileReader = new FileReader(); const spark = new SparkMD5.ArrayBuffer(); // 逐块读取文件内容并计算MD5 const processChunk = (chunk) => { return new Promise((resolve, reject) => { spark.append(chunk); currentPosition += chunk.byteLength; resolve(); }); }; // 读取下一个块 const loadNextChunk = ()...