用 HTML5 和 Vue.js 打造的文件上传神器，你见过吗？

我最近弄了个有意思的小玩意儿，用HTML5和Vue.js做了个能拖拽和批量传文件的工具。这货可是牛逼大了，你可以随便拖个文件夹一口气都搬上来，还能删掉不想要的，并且它还有上传进度条告诉你进度。更神奇的来了，如果文件大过5M，他还能自动给你分好几段每个段传上来。虽然有些挑战，但一旦搞定就觉得超级给力！

一、组件的基本功能

这个功能太棒了，能快速整理好很多文件夹并智能识别要传送哪个。不想给谁的就直接删除，简单得很！上传时还能查看进度，知道传到了哪儿，真是方便又好用!

二、技术挑战：文件路径的读取与进度条的显示

在编程中，大家肯定都遇到过找不到文件路径的问题。不过别担心，我这儿有个小技巧——通过数据转移工具（也就是咱们常说的拖拽存档功能）。这东西不仅能帮你轻松存下浏览器中的文件，还能告诉你这些文件藏在哪儿~不信的话，赶快试试！

查看文件夹上传速度？简单！算下文件占总量有多少就知道了。文件传送完后，文件夹自动加1。遇到超大文件需要分片传输时，麻烦点儿，每次上传一点就要调整文件夹进度。

三、跨域问题与Cookie的处理

说实话，处理跨域访问和Cookie真的很麻烦。为了解决这个问题，我试用了几种办法。比如，在服务端添加Access-Control-Allow-Origin和Access-Control-Allow-Credentialsheader，或者在客户端请求中加上withCredentials参数。这样一来，Cookie就能跟着请求跑动，确保数据安全！

// 拖拽文件夹
dropFolders (e) {
  e.stopPropagation()
  e.preventDefault()
  var items = e.dataTransfer.items
  for (var i = 0; i  {
        let obj = {
          file: file,
          path: path + file.name,
          attr: item.attr
        }
        this.filesList.push(obj)
    })
  } else if (item.isDirectory) {
    var dirReader = item.createReader()
    dirReader.readEntries((entries) => {
      for (let i = 0; i < entries.length; i++) {
        entries[i].attr = item.attr
        this.traverseFileTree(entries[i], path + item.name + '/', temp)
      }
    }, function (e) {
      console.log(e)
    })
  }
}

四、文件夹分片的实现

文件夹分快的这个功能挺厉害，就算大文件夹也能快速上传，省心又降低上传失败率。为啥这样？因为只有我算清楚每部分大小和顺序，上传才会顺畅无阻、完好无误。

五、开发中的小技巧与体会

编程的学习让我发现了很多新鲜事儿！比如说，处理字符串有两个小工具是substring和substr，虽然功能类似，但使用起来还有点小区别。这些看起来微不足道的知识，没准在关键时候能给你带来很大帮助

六、总结与反思

这个新项目让我真切体验到科技的神奇力量~设计每项功能时都得深思熟虑，设想各种可能出现的状况。尽管过程中遇到好多问题，但每次解决后，我对编程越来越有感觉，也更加喜欢这份工作！

七、邀请读者互动

我想聊下最近做项目的新鲜事，好用再告诉我有啥想法都反馈一下！点个赞分享一下也挺好哒~