browser-file-utils 如何使用？

1、简介

浏览器文件操作方法集合

2、作用

包含很多文件操作方法

3、如何使用

3.1 安装

npm i browser-file-utils

3.2 使用方法

引入

import fileUtils from 'browser-file-utils'

or 

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

获取无后缀名的文件名

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

计算文件大小

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

图片元素对象转换为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)
}

服务器图片转为base64

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

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

base64 转为 blob对象

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

getImgBase64('./demo/WX20210513-091307.png', (imgBase64) => {
    console.log(imgBase64)
    // base64转换为 blob对象
    let imageBlob = base64ToBlob(imgBase64)
    console.log(imageBlob)
})

blob对象转为file对象

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

getImgBase64('./demo/WX20210513-091307.png', (imgBase64) => {
    console.log(imgBase64)
    // base64转换为 blob对象
    let imageBlob = base64ToBlob(imgBase64)
    console.log(imageBlob)
    // 将blob对象转为file对象
    let fileObject = blob2File(imageBlob, 'test.png')
    console.log(fileObject)
})

通过input文件域获取到的图片file对象转为base64

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

getImgBase64('./demo/WX20210513-091307.png', (imgBase64) => {
    console.log(imgBase64)
    // base64转换为 blob对象
    let imageBlob = base64ToBlob(imgBase64)
    console.log(imageBlob)
    // 将blob对象转为file对象
    let fileObject = blob2File(imageBlob, 'test.png')
    console.log(fileObject)
    // 将一个image file对象转为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')