js文件分块转base64文本

最新推荐文章于 2025-02-24 12:45:00 发布

润清

最新推荐文章于 2025-02-24 12:45:00 发布

阅读量353

点赞数 1

分类专栏： js编程文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_39852145/article/details/121017710

版权

js编程专栏收录该内容

3 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- FileList 对象每个已选择的文件。如果 multiple 属性没有指定，则这个列表只有一个成员。 -->
    <input type="file" multiple="multiple" id="file" />

    <script>
      window.onload = function () {
        handleSelectFile()
      }


      function handleSelectFile () {
        var fileEle = document.getElementById('file')
        fileEle.onchange = async function (e) {
          var files = e.target.files
          let name, size, type
          if (files && files.length > 0)  {
            filesTask(files).then(res => {
                console.log('res', res)
            })
          }
        }
      }

      async function filesTask (files, path) {
          const filesResult = []
          var file;
          // 遍历所有文件
          for (var i = 0; i < files.length; i++) {
            file = files[i];
            console.log(`file${i}:`, file)
            const base64FileArr = await fileToBase64Arr(file)
            filesResult.push(base64FileArr)
          }
          return filesResult
      }

      function fileToBase64Arr (file) {
        const fileSlice = sliceFile(file)
        // console.log('fileSlice', fileSlice)
        return readFileSlice(fileSlice)
      }

      // size设置分片大小，当前单位为1kb，可通过unit和size调整
      function sliceFile(file, unit = 100) {
        const size = unit * 1024
        const result = []
        let start = 0, current = 0, end = file.size
        while(start < end) {
          if((end-start) > size) {
            current = start + size
          } else {
            current = end
          }
          result.push(file.slice(start, current))
          start = current
        }
        return result
      }

      async function readFileSlice(fileSlice) {
        const result = []
        for await (let fileText of fileSlice.map(file => readFile(file))){
          // console.log('fileText', fileText)
          result.push(fileText)
        }
        return result
      }

      function readFile (file) {
        return new Promise(resolve => {
          var reader = new FileReader();
          // 当 FileReader 读取文件的方式为  readAsArrayBuffer, readAsBinaryString, readAsDataURL 或者 readAsText 的时候，会触发一个 load (en-US) 事件。
          reader.onload = function (res) {
            // console.log('res', res)
            // ①.把3个字节变成4个字节。②每76个字符加一个换行符。③.最后的结束符也要处理。所以base64编码后，字节长度会比原来的大1/3（1/76就忽略不计了）
            const result = event.target.result
            // console.log('result', result)
            // console.log('长度',result.length)
            resolve(result)
          }
          // readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend (en-US) 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。
          reader.readAsDataURL(file)
        })
      }
    </script>
  </body>
</html>