文件上传那些事

需求驱动学习，在公司有个上传2G视频的需求，分片上传折磨了几天，百度了几天才发现文件上传真的能搞出花来，不要被antd 或者 element 组件的东西迷惑，要搞清所有方式！！！

1.文件上传第一步 界面获取本地的文件，input本身就支持，type 改为 file 即可

<input type="file" onchange="_handleFileUp(this)" />
function _handleFileUp (e) {
    let file = e.target.files[0]
    // files 可以拿到文件名 大小 等等
}

2. 文件上传实际就是个网络请求，第一种方式，form-data

function upload(file){
    const xhr = new XMLHttpRequest();
    xhr.onload = function() {
        const resp = JSON.parse(xhr.responseText);
    }
    xhr.open('POST','htt[://1.1.1.1:520/upload');
    const form = new FormData();
    form.append('avater',file)
    xhr.send(form)
}

3. base64格式 上传小文件，比如图片，大文件超过100m的 浏览器是读不出base64的 会卡死

const reader = new FileReader();
reader.onload = e => {
    console.log(e.target.result)
}

reader.readAsDataUrl(FIle); 4.二进制文件上传 application/octet-stream 一般要在header头里 x-ext告知后台文件类型

function upload(file){
    const xhr = new XMLHttpRequest();
    xhr.onload = function() {
        const resp = JSON.parse(xhr.responseText);
    }
    xhr.open('POST','htt[://1.1.1.1:520/upload');
    xhr.setRequestHeader('content-type','application/octetostream');
    xhr.setRequestHeader('x-ext','.jpg')
    xhr.send(file);
}

5.上传多个文件 multiple

<input type="file" multiple   />

6.上传文件夹

<input type="file" webkitdirectory mozdirectory odirectory />

7.分片上传 slice

 // 创建一个分片函数
 // file: 文件
 //chunkSize: 每片大小
 //result 所有切片的数组，然后循环数组去读取成你想要的，ajax发送
 //需要向后台标识一下这个文件，用名称不太推荐，大佬推荐用hash smark-md5
 function createChunks(file,chunkSize){
     const result = []
     for(let i=0,i<file.size,i += chunkSize){
         result.push(file.slice(i,i+chunkSize))
     }
     return result;
 }