關(guān)于上傳文件方法的封裝

export?default?class?FileTools?{

????/**

?????*?@method?fileSizeFormat????格式化文件大小文本

?????*?@param?{number}?fileSize??要格式化的文本大小,單位為Byte

?????*?@param?{number}?precision?取小數(shù)點(diǎn)后幾位,默認(rèn)2位

?????*?@param?{string[]}?units???要格式化的單位文本,順序?yàn)閺男〉酱螅?默認(rèn)為['B',?'KB',?'MB',?'GB',?'TB',?'PB']

?????*?@return?{string}??????????返回格式化后的文件大小字符串

?????*/

????static?fileSizeFormat(fileSize,?precision?=?2,?units?=?['B',?'KB',?'MB',?'GB',?'TB',?'PB'])?{

????????let?p?=?0

????????while?(fileSize?>=?1024?&&?p?<?units.length)?{

????????????fileSize?=?fileSize?/?1024

????????????p++

????????}

????????return?fileSize.toFixed(precision)?+?units[p]

????}

????/***

?????*?@method?fileToBase64????????文件對(duì)象轉(zhuǎn)base64(異步)

?????*?@param?{File}?file??????????要解析的文件對(duì)象

?????*?@param?{function}?callback??解析成功的回調(diào)函數(shù)

?????*?@param?{function}?callerror?解析失敗的回調(diào)函數(shù)

?????*/

????static?fileToBase64(file,?callback,?callerror)?{

????????const?fileReader?=?new?FileReader()

????????fileReader.readAsDataURL(file)

????????fileReader.onload?=?(e)?=>?{

????????????const?[base64Str,?base64Length]?=?[e.target.result,?e.target.result.length]

????????????const?result?=?{

????????????????base64:?base64Str,

????????????????base64Size:?base64Length,

????????????????base64FormatSize:?this.fileSizeFormat(base64Length),

????????????????name:?file.name,

????????????????lastModified:?file.lastModified,

????????????????size:?file.size,

????????????????formatSize:?this.fileSizeFormat(file.size),

????????????????type:?file.type,

????????????}

????????????if?(callback)?callback(result)

????????}

????????fileReader.onerror?=?(e)?=>?{

????????????fileReader.abort()

????????????if?(callerror)?callerror(e)

????????}

????}

????/***

?????*?@method?fileToBase64?文件對(duì)象轉(zhuǎn)base64?Promise版

?????*?@param??{File}?file?要解析的文件對(duì)象

?????*?@return?{Promise}?返回一個(gè)Promise對(duì)象,可鏈?zhǔn)秸{(diào)用then和catch

?????*/

????static?fileToBase64Promise(file)?{

????????return?new?Promise((resolve,?reject)?=>?{

????????????this.fileToBase64(

????????????????file,

????????????????(result)?=>?{

????????????????????resolve(result)

????????????????},

????????????????(error)?=>?{

????????????????????reject(error)

????????????????}

????????????)

????????})

????}

????/***

?????*?@method?fileToBase64List??????????文件列表轉(zhuǎn)base64(異步)

?????*?@param?{FileList|File[]}?files????要解析的文件對(duì)象列表,類型應(yīng)為FileList對(duì)象或元素為Flie對(duì)象的數(shù)組

?????*?@param?{function}?callback????????解析成功的回調(diào)函數(shù)

?????*?@param?{function}?callerror???????解析失敗的回調(diào)函數(shù)

?????*/

????static?fileToBase64List(files,?callback,?callerror)?{

????????const?promiseList?=?[]

????????for?(let?i?=?0;?i?<?files.length;?i++)?{

????????????promiseList.push(this.fileToBase64Promise(files[i]))

????????}

????????Promise.all(promiseList)

????????????.then((result)?=>?{

????????????????if?(callback)?callback(result)

????????????})

????????????.catch((error)?=>?{

????????????????if?(callerror)?callerror(error)

????????????})

????}

????/***

?????*?@method?fileToBase64ListPromise???文件列表轉(zhuǎn)base64?Promise版(異步)

?????*?@param?{FileList|File[]}?files????要解析的文件對(duì)象列表,類型應(yīng)為FileList對(duì)象或元素為Flie對(duì)象的數(shù)組

?????*?@param?{function}?callback????????解析成功的回調(diào)函數(shù)

?????*?@param?{function}?callerror???????解析失敗的回調(diào)函數(shù)

?????*/

????static?fileToBase64ListPromise(files)?{

????????return?new?Promise((resolve,?reject)?=>?{

????????????this.fileToBase64List(files,?(result)?=>?{

????????????????resolve(result)

????????????},?(error)?=>?{

????????????????reject(error)

????????????})

????????})

????}

????/**

?????*?@method?base64ToFile????????base64字符串轉(zhuǎn)文件并拉起下載

?????*?@param?{string}?base64Data??要轉(zhuǎn)換的文件內(nèi)容的base64字符串

?????*?@param?{string}?fileName????轉(zhuǎn)換后的文件名

?????*/

????static?base64ToFile(base64Data,?fileName)?{

????????const?eleLink?=?document.createElement('a')

????????eleLink.download?=?fileName

????????eleLink.style.display?=?'none'

????????eleLink.href?=?base64Data

????????document.body.appendChild(eleLink)

????????eleLink.click()

????????document.body.removeChild(eleLink)

????}

????//?arraybuffer類型轉(zhuǎn)16進(jìn)制字符串

????static?ab2str(buf)?{

????????return?Array.prototype.map

????????????.call(new?Uint8Array(buf),?(x)?=>?("00"?+?x.toString(16)).slice(-2))

????????????.join("");

????}

????//16進(jìn)制字符串?轉(zhuǎn)?ArrayBuffer

????static?str2ab(str)?{

????????let?typedArray?=?new?Uint8Array(

????????????str.match(/[\da-f]{2}/gi).map(function?(h)?{

????????????????return?parseInt(h,?16);

????????????})

????????);

????????return?typedArray.buffer

????}

????/***

?????*?@method?fileToString????????文件對(duì)象轉(zhuǎn)String(異步)

?????*?@param?{File}?file??????????要解析的文件對(duì)象

?????*?@param?{function}?callback??解析成功的回調(diào)函數(shù)

?????*?@param?{function}?callerror?解析失敗的回調(diào)函數(shù)

?????*/

????static?fileToString(file,?callback,?callerror)?{

????????const?fileReader?=?new?FileReader()

????????fileReader.onload?=?(e)?=>?{

????????????let?fileString?=?''

????????????this.abToStr(e.target.result,?(str)?=>?{

????????????????fileString?=?str

????????????})

????????????const?result?=?{

????????????????fileString,

????????????????name:?file.name,

????????????????size:?file.size,

????????????????type:?file.type,

????????????}

????????????if?(callback)?callback(result)

????????}

????????fileReader.onerror?=?(e)?=>?{

????????????if?(callerror)?callerror(e)

????????}

????????readIcon.readAsArrayBuffer(files[i]);

????}

????/***

?????*?@method?fileToStringPromise?文件對(duì)象轉(zhuǎn)String?Promise版

?????*?@param??{File}?file?要解析的文件對(duì)象

?????*?@return?{Promise}?返回一個(gè)Promise對(duì)象,可鏈?zhǔn)秸{(diào)用then和catch

?????*/

????static?fileToStringPromise(file)?{

????????return?new?Promise((resolve,?reject)?=>?{

????????????this.fileToString(

????????????????file,

????????????????(result)?=>?{

????????????????????resolve(result)

????????????????},

????????????????(error)?=>?{

????????????????????reject(error)

????????????????}

????????????)

????????})

????}

????/***

?????*?@method?fileToStringList??????????文件列表轉(zhuǎn)String(異步)

?????*?@param?{FileList|File[]}?files????要解析的文件對(duì)象列表,類型應(yīng)為FileList對(duì)象或元素為Flie對(duì)象的數(shù)組

?????*?@param?{function}?callback????????解析成功的回調(diào)函數(shù)

?????*?@param?{function}?callerror???????解析失敗的回調(diào)函數(shù)

?????*/

????static?fileToStringList(files,?callback,?callerror)?{

????????const?promiseList?=?[]

????????for?(let?i?=?0;?i?<?files.length;?i++)?{

????????????promiseList.push(this.fileToStringPromise(files[i]))

????????}

????????Promise.all(promiseList)

????????????.then((result)?=>?{

????????????????if?(callback)?callback(result)

????????????})

????????????.catch((error)?=>?{

????????????????if?(callerror)?callerror(error)

????????????})

????}

????/***

?????*?@method?fileToStringListPromise???文件列表轉(zhuǎn)String?Promise版(異步)

?????*?@param?{FileList|File[]}?files????要解析的文件對(duì)象列表,類型應(yīng)為FileList對(duì)象或元素為Flie對(duì)象的數(shù)組

?????*?@param?{function}?callback????????解析成功的回調(diào)函數(shù)

?????*?@param?{function}?callerror???????解析失敗的回調(diào)函數(shù)

?????*/

????static?fileToStringListPromise(files)?{

????????return?new?Promise((resolve,?reject)?=>?{

????????????this.fileToStringList(files,?(result)?=>?{

????????????????resolve(result)

????????????},?(error)?=>?{

????????????????reject(error)

????????????})

????????})

????}

????/**

?????*?@method?funDownload????????字符串轉(zhuǎn)文件并拉起下載

?????*?@param?{string}?content??要轉(zhuǎn)換的文件內(nèi)容的字符串

?????*?@param?{string}?fileName????轉(zhuǎn)換后的文件名

?????*/

????static?funDownload(content,?filename)?{

????????const?eleLink?=?document.createElement("a");

????????eleLink.download?=?filename;

????????eleLink.style.display?=?"none";

????????const?blob?=?new?Blob([content]);

????????eleLink.href?=?URL.createObjectURL(blob);

????????document.body.appendChild(eleLink);

????????eleLink.click();

????????document.body.removeChild(eleLink);

????}

}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容