阅读量:0
问题记录原因：
因为需要实现网络文件的上传，结果是由前端实现，方式是一边下载，一遍上传文件，小文件直接上传，大文件进行切片，切片大小和下载大小有关，特此记录。
1.实现方案
fetch进行网络连接的下载，在请求的返回对象中调用response.body.getReader()，这里是读取文件流，便于监听，读取的方式为reader.read()，它的返回对象中包含，文件对象和完成状态，这样就能实现，循环执行下载的动作知道，状态为完成停止。
2.步骤代码
1）下载
const response: any = await fetch(downloadUrl); const reader = response.body.getReader(); // 读取响应的文件字节数 const contentLength = +response.headers.get('Content-Length');2）上传
使用MD5计算文件的hash进行分片上传
let receivedLength = 0; // 分片上传的话需要计算每一片文件的hash，我们使用MD5 const spark = new SparkMD5.ArrayBuffer(); while(true) { const {done, value} = await reader.read(); if (done) { // 计算整个文件的hash const finalHash = spark.end(); console.log('下载&上传完成:', finalHash); break; } // 更新整个文件的hash spark.append(value); receivedLength += value.length; console.log(`下载进度: ${receivedLength} / ${contentLength}`); // 创建一个新的SparkMD5实例来处理当前分片 const chunkHash = SparkMD5.ArrayBuffer.hash(value); // 计算当前分片的hash const offset = receivedLength - value.length; // console.log(contentLength, offset, chunkHash, hash, value.length); // 上传这个分片,这里执行接口 ... }contentLength, offset, chunkHash, hash, value.length，这些参数是分片上传所需要的，依次是：
文件的大小，分片的偏移量，每一片的hash（这个参数可选），整个文件的hash（这个需要提前计算出来），每一个分片的大小；
3.拓展
1）计算大文件的hash
2）content-type类型与文件类型的对应关系
不全面，只是涵盖大多文件类型：
const getFileTypeByContentType = (contentType: string) => { let type = ['image/jpeg', 'image/pjpeg'].includes(contentType) ? 'jpg': ['image/png'].includes(contentType) ? 'png': ['image/gif'].includes(contentType) ? 'gif': ['image/svg+xml'].includes(contentType) ? 'svg': ['video/mp4'].includes(contentType) ? 'mp4': ['video/quicktime'].includes(contentType) ? 'mov': ['text/html'].includes(contentType) ? 'html': ['text/markdown'].includes(contentType) ? 'md': ['text/plain'].includes(contentType) ? 'txt': ['text/csv'].includes(contentType) ? 'csv': ['application/json'].includes(contentType) ? 'json': ['application/x-yaml', 'text/yaml'].includes(contentType) ? 'yaml': ['application/pdf'].includes(contentType) ? 'pdf': ['application/msword'].includes(contentType) ? 'doc': ['application/vnd.openxmlformats-officedocument.wordprocessingml.document'].includes(contentType) ? 'docx': ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'].includes(contentType) ? 'xlsx': ['application/vnd.ms-excel'].includes(contentType) ? 'xls': ['application/vnd.openxmlformats-officedocument.presentationml.presentation'].includes(contentType) ? 'pptx': ['application/zip'].includes(contentType) ? 'zip': ''; return type }