前端大文件上传及切片上传-提升上传效率_前端切片上传

作者：盐析白兔 | 2024-03-19 13:38:12

踩

前端切片上传

一、使用场景：

1.大文件上传

2.网络环境环境不好，存在需要重传风险的场景

二、名词解释：

切片上传：也叫分片上传，就是将所要上传的文件，按照一定的大小，将整个文件分隔成多个数据块来进行分别上传，上传完之后再由服务端对所有上传的文件进行汇总整合成原始的文件。

断点续传：是在下载或上传时，将下载或上传任务（一个文件或一个压缩包）人为的划分为几个部分，每一个部分采用一个线程进行上传或下载，如果碰到网络故障，可以从已经上传或下载的部分开始继续上传或者下载未完成的部分，而没有必要从头开始上传或者下载。

三、实现流程步骤：

我们先来个简单的文件上传案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文件上传</title>
    <style>
      html,
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.0/axios.js"></script>
    <input type="file" name="file" id="ipt" />
    <input type="button" οnclick="getData()" value="get请求数据"/>
    <button οnclick="upload()" type="button"> 上传</button>
    <script>
      function getData(){
        axios.get("http://localhost:9528/uname?name=abc").then((res) => {
          console.log(res.data);
        });
      }
      function upload() {
        const file = ipt.files[0];
        const formData = new FormData();
        formData.append("formData", file, file.name);
        console.log(formData);
        axios.post("http://localhost:9528/upload"

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】