vue-simple-uploader本身是基于vue2實(shí)現(xiàn)，如果要使用vue3會(huì)報(bào)錯(cuò)。如何在vue3中使用，可參考我的另一篇文章：解決vue3中不能使用vue-simple-uploader__Jyann_的博客-CSDN博客

一.實(shí)現(xiàn)思路

1. 使用vue-simple-uploader組件的uploader組件，設(shè)置自動(dòng)上傳為false，即可開(kāi)啟手動(dòng)上傳。:autoStart=false
2. 設(shè)置上傳參數(shù)options中的數(shù)據(jù)(target、chunkSize，fileParameterName、maxChunkRetries、testChunks、checkChunkUploadedByResponse、parseTimeRemaining)；
3. 設(shè)置testChunk:true組件會(huì)自動(dòng)發(fā)起同url地址的get方式進(jìn)行校驗(yàn)（實(shí)現(xiàn)秒傳、分片續(xù)傳、最新上傳）
4. 進(jìn)行MD5計(jì)算（使用spark-md5）

二.重點(diǎn)理解

1：如何實(shí)現(xiàn)自動(dòng)校驗(yàn)

uploader組件options參數(shù)中設(shè)置testChunks就會(huì)發(fā)送get請(qǐng)求到后端進(jìn)行校驗(yàn)。需要后端有校驗(yàn)邏輯。

校驗(yàn)規(guī)則：

1. 后端根據(jù)文件名（可不用）+md5去查找本地或者數(shù)據(jù)庫(kù)有沒(méi)有該文件上傳記錄，有則已經(jīng)上傳過(guò)，返回已上傳過(guò)標(biāo)識(shí)skipUploader；
2. 如果上傳過(guò)部分分片，則返回uploadedChunks數(shù)組，組件會(huì)自動(dòng)跳過(guò)這些已經(jīng)上傳過(guò)的分片；
3. 如果以上都沒(méi)有上傳會(huì)重新開(kāi)始上傳；

前端發(fā)送get請(qǐng)求后，會(huì)通過(guò)options的參數(shù)中checkChunkUploadedByResponse方法進(jìn)行攔截：

1. 如果skipUpload為true則返回true，不再進(jìn)行后續(xù)操作；
2. 如果uploadedChunks則返回后續(xù)的分片，跳過(guò)已上傳的分片；
3. 如果沒(méi)有上傳過(guò)不會(huì)進(jìn)入此方法；

2：如何實(shí)現(xiàn)秒傳、斷點(diǎn)續(xù)傳、最新上傳

后端get請(qǐng)求中校驗(yàn)是否有上傳過(guò)文件，上傳過(guò)則秒傳，上傳過(guò)部分分片則斷點(diǎn)續(xù)傳，否則重新上傳。

前端通過(guò)checkChunkUploadedByResponse獲取和設(shè)置后端返回的結(jié)果

3、MD5計(jì)算

1. 首先設(shè)置不自動(dòng)上傳:autoStart=false
2. 然后通過(guò)FileReader讀取文件，及對(duì)文件進(jìn)行切片F(xiàn)ile.prototype.slice
3. 根據(jù)文件大小和分片大小，切片后循環(huán)讀取文件，并計(jì)算MD5
4. 通過(guò)spark-md5計(jì)算分片的md5

三.代碼實(shí)現(xiàn) 

<template><uploader :options="options" :fileStatusText="fileStatusText" class="uploader-example" ref="uploaderRef":auto-start="false&