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
原理说明:断点续传是基于 分片上传 的功能上,在已经上传的分片上,继续上传剩下的分片文件。
注意:新版浏览器已经可以实现不用 input[type="file"] 标签,直接通过JS的 window.showOpenFilePicker() 方法 唤醒 文件选择框了。