大文件上传

2023年06月23日约312字预计需要1分钟

原理

大文件通过File.prototype.slice切片，每片带上序号和uploadId并行上传，接口通知上传完成。

断点续穿，内容计算hash值，服务端返回该hash切片是否上传完成，切片每片10M。

sparkmd5。

页面假死：webworker计算md5；时间分片方法

File相关

File 对象继承自 Blob 对象

1 2	`<input type='file' id="fileItem"/> var file = document.getElementById('fileItem').files[0];// 可以多个文件`

文件下载

<a href="result.png" download>download</a>
<a href="test.png" download="joker.png">下载</a>

// fetch
function downloadFile(url, filename='') {
  fetch(url, {
    headers: new Headers({
      Origin: location.origin,
    }),
    mode: 'cors',
  })
    .then(res => res.blob())
    .then(blob => {
      const blobUrl = window.URL.createObjectURL(blob)
      download(blobUrl, filename)
      window.URL.revokeObjectURL(blobUrl)
    })
}
function download(href, filename = '')  {
  const a = document.createElement('a')
  a.download = filename
  a.href = href
  document.body.appendChild(a)  
  a.click()
  a.remove()
}

保存文本

const downloadText = (text, filename = '') {
  const a = document.createElement('a')
  a.download = filename
  const blob = new Blob([text], {type: 'text/plain'})  
  // text指需要下载的文本或字符串内容
  a.href = window.URL.createObjectURL(blob) 
  // 会生成一个类似blob:http://localhost:8080/d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串
  document.body.appendChild(a)  
  a.click()
  a.remove()
}