使用Worker对文件上传

发表于 分类于 Disqus： 本文字数： 349 阅读时长 ≈ 1 分钟

使用 Worker 对文件上传

web worker 多线程

相关 web worker api 接口，可参考：
https://developer.mozilla.org/zh-CN/docs/Web/API/Worker

通过 worker 可以创建后台任务，任务中可向其创建者发送和接受消息。

创建 web Worker

通过 js 路径，创建一个 worker 实例，然后向子线程发送 base64，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
const reader = new FileReader()
reader.readAsDataURL(blob) //blob 转 base64
// 创建 woker 实例，加载一个单独的 js 文件
const pdfWorker = new Worker('./pdfWorker.js')
reader.onload = function (e) {
  pdfWorker.postMessage({
    url: pdfUploadUrl, // 需要上传服务器的url地址
    blob: e.target.result, // base64文件
    fileName, // 文件名
    docType, // 所需的参数
    token, // 所需要的 token
  })
}

Worker 上传文件

接受来自主线程的消息，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// self 表示自己
// onmessage 接受来自主线程的消息
self.onmessage = e => {
  const { url, blob, fileName, docType, token } = e.data
  console.log('pdfWorker.js', url, fileName, docType, token)

  var requestUrl = `${url}/update/file?doc_type=${docType}`

  var request = new XMLHttpRequest()
  request.open('POST', requestUrl, true)
  const file = dataURLtoFile(blob, fileName)
  // set header
  // Authorization Bearer
  request.setRequestHeader('Authorization', 'Bearer ' + token)
  const formData = new FormData()
  formData.append('file', file)
  request.send(formData)
}

// base64 转 file
dataURLtoFile = function (dataurl, filename) {
  var arr = dataurl.split(',')
  var mime = arr[0].match(/:(.*?);/)[1]
  var bstr = atob(arr[1])
  var n = bstr.length
  var u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  // 转换成file对象
  return new File([u8arr], filename, { type: mime })
  // 转换成成blob对象
  //return new Blob([u8arr], { type: mime })
}

注意事项

web worker 有诸多限制，不能操作 dom ，不能读取本地文件等等。

更多 api 接口说明，可参阅官方文档，https://developer.mozilla.org/zh-CN/docs/Web/API/Worker