? // 一 、第一個(gè)函數(shù)(file前置處理函數(shù))
customRequest: async (params: { file }) => {
? setLoading(true) // 開啟頁面loading，避免切片大文件期間用戶亂點(diǎn)，每個(gè)項(xiàng)目開啟loading的api不同，不一定是setLoading
? const { file } = params // 拿到file
? const { size, type, name } = file // 解構(gòu)出可能用到的幾個(gè)屬性
? // 1.格式判斷(types是props參數(shù)，是支持的格式數(shù)組，例：types: ['jpg', 'png', 'bmp', 'jpeg'])，如果不需要做格式限制，可以不寫第一條的代碼
? if (types.length !== 0) {
? ? const fileExt = /\.([0-9a-zA-Z]+)$/i.exec(name)[1] // 獲取后綴
? ? const reg = new RegExp(`(${types.join('|')})$`)
? ? if (!reg.test(type) && !reg.test(fileExt)) {
? ? ? setLoading(false) // 關(guān)閉loading
? ? ? message.error(messageError) // 格式不對提示頁面提示，提示語messageError也是props傳進(jìn)來的參數(shù)，也可以直接寫死幾個(gè)字如“格式不正確”
? ? ? return false
? ? }
? }
? // 2.大文件判斷（maxSize是props參數(shù)，讓用戶自定義限制最大上傳文件大小）
? if (size > maxSize * 1024 * 1024) {
? ? setLoading(false) // 關(guān)閉loading
? ? message.error('文件格式或大小不符合要求，請重新上傳！')
? ? return false
? }
? // 3.獲取文件md5值（文件的md5值是根據(jù)文件內(nèi)容生成的一個(gè)單獨(dú)的標(biāo)示，需要安裝并引入一個(gè)插件：import SparkMD5 from 'spark-md5'）
? const result: any = await fileParse(file, 'buffer') // fileParse轉(zhuǎn)換函數(shù)我附在最下面??，將file轉(zhuǎn)成buffer格式數(shù)據(jù)，
? const spark = new SparkMD5.ArrayBuffer()
? spark.append(result)
? const hash = spark.end() // 獲取到的文件md5值
? // 4.重復(fù)文件判斷
? ? ? ?/** 如果重復(fù)直接提示并return，此部分代碼根據(jù)框架不同自己寫，如果不需要做去重可不寫，這里就不貼出來了…… **/
? // 5.文件切片上傳
? const partSize = 5 * 1024 * 1024 // 考慮到前后端上傳效率，我這里是切成5M/片,這個(gè)可根據(jù)項(xiàng)目實(shí)際需要自己決定
? const share = size <= partSize ? 1 : size / partSize // 判斷如果文件<=5M,不切片，超過按照5M每份切
? let cur = 0
? const partList = [] // 存儲(chǔ)文件切片的數(shù)組
? for (let i = 0; i < share; i++) {
? ? const obj = {
? ? ? file: file.slice(cur, cur + partSize), // 調(diào)用file.slice方法進(jìn)行file的切片，第一個(gè)參數(shù)從哪里開始切，第二個(gè)參數(shù)切到哪里
? ? ? id: i + 1 // 每一個(gè)切片的單獨(dú)標(biāo)示，后期續(xù)傳時(shí)用與去除已上傳部分的切片
? ? }
? ? partList.push(obj) // 把切的每一片統(tǒng)一放到一個(gè)數(shù)組里
? ? cur += partSize
? }
? isOpen = true // isOpen代表上傳開關(guān)，true標(biāo)示打開上傳開關(guān)，false標(biāo)示關(guān)閉上傳開關(guān)，你可以定義不同的名字，并且在哪里定義看你所用的框架
? setLoading(false) // 關(guān)閉loading
? // 6.調(diào)用斷點(diǎn)續(xù)傳
? register(partList, hash, name) // 此函數(shù)往下看??
},
// 二 、 第二個(gè)函數(shù)（注冊上傳任務(wù)函數(shù) -- 調(diào)用第一個(gè)接口，注冊上傳任務(wù)接口）
const register = (partList, hash, fileName) => {
// 1.調(diào)第一個(gè)接口，上傳任務(wù)注冊接口，參數(shù)需要將文件的md5傳過去，后臺(tái)專門根據(jù)此文件開啟一個(gè)上傳任務(wù)（一個(gè)文件對應(yīng)一個(gè)上傳任務(wù)）
taskRegistration({ fileMd5: hash })
? .then((res) => {
? ? const { uploadId, status, partNumSet } = res.data // uploadId是與這個(gè)文件對應(yīng)的上傳任務(wù)的id標(biāo)示，status是此文件的狀態(tài)，如已上傳部分切片||從未進(jìn)行上傳，這是第一次||已經(jīng)上傳完了還未進(jìn)行合并，partNumSet是一個(gè)數(shù)組，里面放著已經(jīng)上傳的切片的id，如果是從未進(jìn)行上傳，就是空數(shù)組
? ? const mergeParame = { hash, uploadId, fileName }
? ? if (status === 1) { // 1.已全部上傳，未合并，直接調(diào)合并函數(shù)
? ? ? complete(mergeParame)
? ? } else if (status === 2) { // 2.已上傳部分，根據(jù)后臺(tái)返回的partNumSet字段(已上傳切片id的數(shù)組)篩選，去除已上傳部分，把剩下的切片組成一個(gè)新數(shù)組，如果篩選出來的新數(shù)組長度是0說明切片都已上傳，直接合并，否則調(diào)用上傳切片函數(shù)
? ? ? const newPartList = []
? ? ? partList.forEach((item) => {
? ? ? ? if (partNumSet.indexOf(`${item.id}`) === -1) {
? ? ? ? ? newPartList.push(item)
? ? ? ? }
? ? ? })
? ? ? if (newPartList.length === 0) {
? ? ? ? complete(mergeParame)
? ? ? } else {
? ? ? ? newRequestArr(newPartList, hash, fileExt, uploadId, mergeParame)
? ? ? }
? ? } else if (status === 3) { // 3.從未上傳過此文件，調(diào)用上傳切片函數(shù)
? ? ? newRequestArr(partList, hash, fileExt, uploadId, mergeParame)
? ? }
? })
}
// 三 、 第三個(gè)函數(shù)（上傳切片函數(shù) -- 調(diào)用第二個(gè)接口，上傳文件切片接口）
const newRequestArr = (partList, hash, fileExt, uploadId, mergeParame) => {
let i = 0
const fn = () => {
? const formData = new FormData() // 通過form將file切片傳給后臺(tái)
? formData.append('file', partList[i].file)
? formData.append('fileMd5', hash)
? formData.append('fileExt', fileExt)
? formData.append('uploadId', uploadId)
? formData.append('partNumber', partList[i].id)
? sliceUpload(formData).then(() => {
? ? if (isOpen.current) { // 如果上傳開關(guān)在這里是false，則會(huì)停止遞歸調(diào)用上傳函數(shù)，至于在哪里把他置為false，看你在哪里點(diǎn)擊觸發(fā)的暫?；蛘邉h除上傳函數(shù)了，自己決定
? ? ? i += 1
? ? ? if (i < partList.length) {
? ? ? ? fn()
? ? ? } else {
? ? ? ? complete(mergeParame) // 如果是最后一個(gè)切片，則調(diào)用合并函數(shù)
? ? ? }
? ? }
? })
}
fn()
}
// 四 、 第四個(gè)函數(shù)（文件合并函數(shù) -- 調(diào)用第三個(gè)接口，文件合并接口）
const complete = (mergeParame) => {
fileMerge(mergeParame).then((res) => {
? const { status, fileId } = res.data
? if (status === 1) {
? ? message.error('上傳失敗，請重試！')
? ? return
? }
? if (status === 2) {
? ? message.error('有其它用戶正在上傳該文件，請稍后重試！')
? ? return
? }
})
}
// 轉(zhuǎn)換函數(shù)
const fileParse = (file, type = 'base64') => {
return new Promise((res) => {
const fileReader = new FileReader()
/* fileReader.readAsArrayBuffer() // 轉(zhuǎn)成buffer格式數(shù)據(jù)
? fileReader.readAsBinaryString() // 轉(zhuǎn)成二進(jìn)制格式數(shù)據(jù)
? fileReader.readAsDataURL() // 轉(zhuǎn)成base64格式數(shù)據(jù)
? 解析過程是異步，所以需要調(diào)用onload事件的e.target.result獲取轉(zhuǎn)換后的結(jié)果
*/
switch (type) {
? case 'base64':
? ? fileReader.readAsDataURL(file)
? ? break
? case 'buffer':
? ? fileReader.readAsArrayBuffer(file)
? ? break
? case 'binary':
? ? fileReader.readAsBinaryString(file)
? ? break
? default:
? ? break
}
fileReader.onload = (e) => {
? res(e.target?.result)
}
})
}
文章出處
