vue使用原生Web Worker

网上关于vue使用Web Worker http://www.5imoban.net/jiaocheng/CSS3_HTML5/2019/0618/3579.html，有相关的库，但是我爱模板网做的这个项目，并不需要处理多少Web Worker，于是直接用原生的来撸了。

1、在根目录public文件夹下新建worker.js，监听主线程传来的数据，处理完关闭：

self.addEventListener('message', function (e) {
    //接收主线程传来的数据
    const files = e.data;
    //循环，耗时操作
    const temp = []
    for (const i in files) {
      const curFile = {}
      if (!files[i].name || !files[i].webkitRelativePath) continue
      curFile.file = files[i] // 存储的源文件对象，用来上传
      curFile.name = files[i].name.substring(0, files[i].name.lastIndexOf('.'))
      curFile.webkitRelativePath = files[i].webkitRelativePath
      curFile.size = calcSize(files[i].size)
      curFile.type = files[i].name.split('.')[files[i].name.split('.').length - 1]
      curFile.lastModified = timeStamp2Date(files[i].lastModified)
      temp.push(curFile)
    }
    //将结果发给主线程
    self.postMessage(temp);
    //关闭
    self.close();
}, false);

2、在VUE的方法中写了下面的代码：

onPickDirectory(e) {
  const that = this;
  that.scaned = false
  const files = e.target.files
  //实例化worker，指定刚才的js
  var worker = new Worker('work.js');
  //向子线程发送数据
  worker.postMessage(files);
  //监听子线程返回数据
  worker.onmessage = function (event) {
      //接收数据
    that.fileList = event.data;
    //结束
    worker.terminate();
  }
},

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！