1、簡(jiǎn)介

瀏覽器文件操作方法集合

2、作用

包含很多文件操作方法

3、如何使用

3.1 安裝

npm i browser-file-utils

3.2 使用方法

引入

import fileUtils from 'browser-file-utils'

or 

import {
    getBaseName,
} from 'browser-file-utils'

獲取無(wú)后綴名的文件名

import {
    getBaseName,
} from 'browser-file-utils'
console.log(getBaseName('user-avater.png')) // user-avater
console.log(getBaseName('user-avater.jpg.png')) // user-avater.jpg

獲取文件名的后綴名

import {
    getExtension,
} from 'browser-file-utils'
console.log(getExtension('user-record-list.docx')) // docx

判斷文件是否為圖片

import {
    isImage,
} from 'browser-file-utils'
console.log(isImage('a.b.c.docx')) // false
console.log(isImage('user-avater.png')) // true

計(jì)算文件大小

import {
    countMB,
} from 'browser-file-utils'
console.log(countMB('1024')) // 1.00 KB
console.log(countMB('5325886')) // 5.08 MB
console.log(countMB('5656545484')) // 5.27 GB
console.log(countMB('5656545484')) // 5.14 TB

圖片元素對(duì)象轉(zhuǎn)換為base64字符串

import {
    image2Base64,
} from 'browser-file-utils'

let image = document.createElement('img')
image.src = './demo/WX20210513-091307.png'
document.body.appendChild(image)
image.onload = function () {
    let imageBase64 = image2Base64(image)
    console.log(imageBase64)
}

服務(wù)器圖片轉(zhuǎn)為base64

import {
    getImgBase64,
} from 'browser-file-utils'

getImgBase64('./demo/WX20210513-091307.png', (imgBase64) => {
    console.log(imgBase64)
})

base64 轉(zhuǎn)為 blob對(duì)象

import {
    getImgBase64,
    base64ToBlob,
} from 'browser-file-utils'

getImgBase64('./demo/WX20210513-091307.png', (imgBase64) => {
    console.log(imgBase64)
    // base64轉(zhuǎn)換為 blob對(duì)象
    let imageBlob = base64ToBlob(imgBase64)
    console.log(imageBlob)
})

blob對(duì)象轉(zhuǎn)為file對(duì)象

import {
    getImgBase64,
    base64ToBlob,
    blob2File,
} from 'browser-file-utils'

getImgBase64('./demo/WX20210513-091307.png', (imgBase64) => {
    console.log(imgBase64)
    // base64轉(zhuǎn)換為 blob對(duì)象
    let imageBlob = base64ToBlob(imgBase64)
    console.log(imageBlob)
    // 將blob對(duì)象轉(zhuǎn)為file對(duì)象
    let fileObject = blob2File(imageBlob, 'test.png')
    console.log(fileObject)
})

通過(guò)input文件域獲取到的圖片file對(duì)象轉(zhuǎn)為base64

import {
    getImgBase64,
    base64ToBlob,
    blob2File,
    imageFileToBase64,
} from 'browser-file-utils'

getImgBase64('./demo/WX20210513-091307.png', (imgBase64) => {
    console.log(imgBase64)
    // base64轉(zhuǎn)換為 blob對(duì)象
    let imageBlob = base64ToBlob(imgBase64)
    console.log(imageBlob)
    // 將blob對(duì)象轉(zhuǎn)為file對(duì)象
    let fileObject = blob2File(imageBlob, 'test.png')
    console.log(fileObject)
    // 將一個(gè)image file對(duì)象轉(zhuǎn)為base64
    imageFileToBase64(fileObject, (res) => {
        // res = { error, data }
        let imgTag = document.createElement('img')
        imgTag.src = res.data
        document.body.appendChild(imgTag)
    })
})

下載文件到本地

import {
    downloadFile
} from 'browser-file-utils'

downloadFile('tt.txt', 'http://127.0.0.1:8080/demo/tt.txt')
downloadFile('WX20210513-091307.png', 'http://127.0.0.1:8080/demo/WX20210513-091307.png')