js文件上传(分块、断点续传)

一、常规文件上传:

  方案一:直接通过from表单

  方案二:通过js上传文件:https://blog.csdn.net/qq_37568942/article/details/98873471

    说明:H5中,选择上传的文件,必须通过 input[type="file"] 标签实现。js中是无法获取 input[type="file"] 选中文件的路径和数据,。但是允许FormData 对象 获取到 input[file] 内的数据流。

       formData对象中和文件相关的信息,js是无法打印出来的。

    关键点:使用new FormData() 创建一个form类型的数据,接受input控件中的文件数据流。

      var inputDOM = this.$refs.file  // 获取input[type="file"] 对象
      var file = inputDOM.files[0]   
      var formData = new FormData()
      formData.append('uploadFile', file)  // 将input控件里面的数据流,塞到formData对象里
      uploadFileToQiniu(formData)  // 调用ajax请求,注意这里的请求头Content-Type 必须是 multipart/form-data类型的

二、大文件 分片上传:https://www.cnblogs.com/sghy/p/9143955.html  或 https://www.jianshu.com/p/bfaad1323a4c

  原理说明:其实就是js把大文件,分割成多个小文件。在把这些小文件,一个一个单独上传上去就可以了。

         前端生成的是分割的文件,后端就需要合并这些小文件。才能成为一个完整的文件。

         var file = document.getElementById("file").files[0];
         var chunk = file.slice(start,end);//切割文件    

三、断点续传:https://www.cnblogs.com/viewts/p/10820785.html

  原理说明:断点续传是基于 分片上传 的功能上,在已经上传的分片上,继续上传剩下的分片文件。

原文地址:https://www.cnblogs.com/wfblog/p/12801504.html