DAY 19 - 上传档案的相关概念：上传进度条、checksum、大档分片上传

上传档案其实还有蛮多议题可以讨论，那我们今天就一一道来ＸＤ

显示上传进度

档案上传昨天我们有提到，可以用FormData的型式，透过API传给後端。
由於新版的XMLHttpRequest的优化，XMLHttpRequest提供progress事件，可以提供进度资讯。档案传输下载或上传时，可以利用progress事件知道目前的进度。
今天我们要使用的范例是使用axios，不同的方法语法上有些许不同，不过概念上都是一样的。透过progress事件，取得上传进度。

HTML

<input type="file" @change="updateFile">
<button @click="submit">上传</button>
<p>上传进度： {{progress}}</p>

Javascript

// 选取档案
updateFile(e){
    this.file = e.target.files[0];

},
//上传档案
submit(){
    let  fd = new FormData()
    form.append('file', this.file)
    
    let config = {
        onUploadProgress: progressEvent => {
            let complete = (progressEvent.loaded / progressEvent.total * 100 | 0) '%'
            this.progress = complete
        }
    }
    axios.post(`APIURL`,fd, config).then((res) => {
        if (res.data.status === 'success') {
            console.log('上传成功')
        }
    })
}

Checksum 校验码

Checksum，也可以称杂凑码（hash sum)。是透过杂凑演算法(Ex.MD5、SHA-1、CRC32、SHA-256...)计算而成一个独一无二的数字文字组合。只要input相同，透过同样的演法计算，output的checksum一定相同。在上传档案时，会用checksum用来检查档案是否完整或正确。

分片上传

分片上传的意思是：我们会把档案做切割，分成一块一块的小分片，上传至後端，再由後端合并起来。

1个档案 = 多个block
1的block = 多个chunk（片)

chunk只是上传时的临时单位，一般server会设计在固定的时间清除没有被合并成档案的chunk

为什麽要这麽麻烦呢？又要怎麽做呢？接下来介绍一下分片上传的概念～

为什麽整的档案上传如果太大会失败？为什麽需要分片上传

1. server配置：server端可能会配置每个request的最大资料量，若超过这个配置request就会失败。EX.PHP中预设设定post_max_size："8M"、Apache预设限制上传档案的大小为2M...等等，超过定义大小的request就会失败。
2. request timeout: 发出request後，得到response的时间大於server端设定的response时间，也会失败。
3. 网路不稳定：不可控制的因素，但却是最常见的。

分片上传的优点

1. 解决档案过大会上传失败的问题。
2. 当档案分片後，可以将不同分片同时上传，增加传输速度。
3. 分片的档案会一块快上传至server，若中断传输，server已保留前面上传的档案，可以从还没上传的部分再进行，达到续传的效果。

由於每种程序的写法可能会有些许差异，今天我们就介绍分片上传的流程想法～

流程想法

1. 选取档案，取得档案物件，转换成arrayBuffer（後面需要切割使用，因此先转成arrayBuffer，还记得吗？我们前几天有聊过，若非对整个档案的操作建议转成arrayBuffer）
2. 建立档案，转化成切片（可使用固定的大小做切片，EX：每个切片2M，可使用slice)
   • 建议每个切片小於10M
3. 初始化切片上传任务，意即：将每个分片透过杂凑演算法，取得checksum，成为这个分片的唯一ID，後续上传时带上此ID
4. 开始上传分片，上传时带上分片大小、分片唯一ID等等讯息，直到所有分片上传完成
5. 当前端分片完成後，通知後端，後端再进行档案合并

档案上传真的蛮多东西可以探讨，包含续传、秒传等等，
但只要大概理解这些档案相关的观念，在实作上都可以更容易地去应用开发～～

REF

• https://www.gushiciku.cn/pl/glEe/zh-tw
• https://javascript.info/resume-upload
• https://iter01.com/605391.html