JS 文件上传

developer.mozilla.org/zh-CN/docs/…

总结一下文件上传中的零碎知识点

捕获拖动的文件

一、原生input就支持拖拽

将input标签设置宽和高，透明度为0，设置一下样式，监听change事件。

二、开辟一块div监听拖拽

1. 选择一个div区域监听dragenter,dragover,drag
2. dragenter,dragover事件阻止事件捕获和冒泡以及默认事件
3. drag事件事件阻止事件捕获和冒泡以及默认事件还有

div.addEventListener(drag, function(e){
    e.stopPropagation()
    e.preventDefault()
    
    let aaa = e.dataTransfer
    let files = aaa.files          // 捕获到了文件，之后随心所欲
    
}, false)

DataTransfer 对象用于保存拖动并放下（drag and drop）过程中的数据。它可以保存一项或多项数据。DataTransfer

图片缩略图的实现

假设你已经获取到了file对象

一、FileReader

let reader = new FileReader()
reader.onload = (e) => {
    img.src = e.target.result      // base64的编码
}
reader.readAsDataURL(file)

二、window.URL.createObjectURL(fileObj)

img.src= window.URL.createObjectURL(file)
img.onload = function () {
    window.URL.revokeObjectURL(this.src);
}

进度条的实现

原生js

xhr.upload.onprogress = (e) => {
    (e.loaded / e.total)         // 上传进度的百分比
}

axios

请求配置中监听上传事件

上传格式

拿到的file对象就是二进制编码，因为File 对象是特殊类型的 Blob，BLOB (binary large object)----二进制大对象

文件一般使用form-data格式传输（二进制），请求体为一个FormData对象即可，formdata.append(name, file)填充数据，这里的file就是二进制编码。

base64编码

一般是application/json格式，{name: base64编码}

问题是如何获取图片的base64编码，答案是使用FileReader

let reader = new FildReader()
reader.onload = (e) => {
    e.target.result.split(',').pop()      // 拿到base64编码
    // e.target.result的格式为'data:application/octet-stream;base64,base64编码'
}
reader.readAsDataURL(file)

二进制编码

一般的消息格式为application/octet-stream，请求体为file对象即可

取消发送

原生js

借助到XMLHttpRequest.abort()方法

如果该请求已被发出，XMLHttpRequest.abort()  方法将终止该请求。当一个请求被终止，它的 readyState 将被置为 XMLHttpRequest.UNSENT (0)，并且请求的 status 置为 0。

示例
var xhr = new XMLHttpRequest(),
    method = "GET",
    url = "https://developer.mozilla.org/";
xhr.open(method, url, true);

xhr.send();

btn.onclick = function(){
  xhr.abort();
}

axios

查看axios文档

大文件上传

1.对文件进行切片，使用File.slice(start,end)方法，每个片段发送一次请求。

2.为了实现闪传，要对该大文件生成一个hash值，让后端分辨该大文件是否上传过。

方法：使用spark-md5的包