文件切片上传

hsdjhaiwhdnjw

于 2024-08-08 16:33:23 发布

阅读量73

点赞数 3

文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/qq_41604686/article/details/141030571

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<input type="file" id="input">
<button id="btn">上传</button>
<script>
  document.querySelector("btn").addEventListener("click",upload);
  let index = 0,  //切片索引
    chunkSize = 1024;//文件以1024个字节进行切片
  function upload() {
    const file = document.querySelector("#input").files[0];
    const [fileName, ext] = file.name.split("."); //获取文件名和文件后缀
    let start = index * chunkSize;  //文件上传的起始位置
    if(start > file.size) { //如果文件上传的起始位置大于文件大小，就return掉，否则继续上传
      return
    }
    const blob = file.slice(start, start+chunkSize);  //根据起始位置，将文件切片
    const formData = new FormData();  //创建一个form数据对象
    const blobName = `${fileName}${index}.${ext}`;  //定义blob文件名
    const blobFile = new File([blob],blobName); //根据切片信息，创建file对象

    formData.append("file",blobFile); //上传接口的入参
    fetch("/upload", {  //文件上传
      method: "post",
      body: formData
    }).then(() => {
      index ++;
      upload(); //上传成功后，继续上传下一个切片
    })
  }
</script>
</body>
</html>

hsdjhaiwhdnjw

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
文件切片上传

/如果文件上传的起始位置大于文件大小，就return掉，否则继续上传。//根据切片信息，创建file对象。//上传成功后，继续上传下一个切片。//文件以1024个字节进行切片。//根据起始位置，将文件切片。//创建一个form数据对象。//获取文件名和文件后缀。//文件上传的起始位置。//定义blob文件名。
复制链接

扫一扫