File文件几种格式的相互转换

file、blob、canvas、dataUrl几种对象之间的转换

• blob|file对象转成dataUrl

    function readBlobAsDataURL (blob|file, callback) {
        let fr = new FileReader()
        fr.onload = function (e) {
            callback && callback(e.target.result)
        }
        fr.readAsDataURL(blob)
    }

• canvas转换成dataUrl

    canvas.toDataURL('image/png'|'image/jpeg',0.8)

• dataUrl转换成blob

    function dataURLtoBlob (dataurl) {
        let arr = dataurl.split(',')
        let mime = arr[0].match(/:(.*?);/)[1]
        let bstr = atob(arr[1])
        let n = bstr.length
        let u8arr = new Uint8Array(n)
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
        }
        return new Blob([u8arr], { type: mime })
    }

• dataUrl转换成file

     function dataURLtoFile (dataurl, filename) {
        let arr = dataurl.split(',')
        let mime = arr[0].match(/:(.*?);/)[1]

        let bstr = atob(arr[1])
        let n = bstr.length
        let u8arr = new Uint8Array(n)
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], filename, { type: mime })
    }

• 文件大小格式化

    function formateFileSize(fileSize) {
        if (fileSize === 0) {
            return '0.0M'
        }
        if (fileSize < 1024) {
            return `${fileSize}B`
        } else if (fileSize < 1024 * 1024) {
            return `${(fileSize / 1024).toFixed(2)}KB`
        } else if (fileSize < 1024 * 1024 * 1024) {
            return `${(fileSize / 1024 / 1024).toFixed(2)}MB`
        } else {
            return `${(fileSize / 1024 / 1024 / 1024).toFixed(2)}GB`
        }
    }