大文件上传（分片上传）

当文件太大时，公司服务器带宽太小，会导致文件上传过慢超时，这边前端使用vue，组件使用element

  //view内容
 <el-upload
     class="upload-demo"
      :action="imageUploadUrl"
       :limit="1"
      :auto-upload="false"
      ref="upload"
      :file-list="item.fileList"
      :on-change="
       (file, fileList) => {
       uploadChange(file, fileList, item);//这边业务需求带了其他参数
       }
       "
        accept=".mp4"
        :on-exceed="uploadExceed"
       :on-remove="
        (file, fileList) => {
         uploadRemove(file, fileList, item);
       }
      "
      >
      <!-- 上传视频 -->
    <el-button size="small" type="primary"
        ><i class="el-icon-plus"></i>选择文件</el-button
        >
   </el-upload>

　　

 js部分
uploadChange(file, fileList, item) {
      let start = 0;
      let chunkSize = 1024 * 1024;
      var file = file.raw;
　　　　
      while (start < file.size) {
        const chunk = file.slice(start, start + chunkSize);
　　　　　//这一部分就进行文件循环上传 例如

const formData = new FormData(); formData.append('file', chunk); formData.append('filename', file.name); formData.append('chunkIndex', start / chunkSize);

　　　　然后进行接口的调用上传

       //console.log(chunk);
        start += chunkSize;
      }
}

各位可以根据业务需求进行不同的调整

 

uploadChange