El-upload,自定义分片上传功能

Upload() {
  if (this.fileList && this.fileList.length == 0)  {
     this.$message({
       message: "请选择上传的文件",
       type: "warning",
     }, 2000)
     return
  }
  for (let i = 0; i < this.fileList.length; i++) {
    setTimeout(() => {
       let file = this.fileList[i];
       // 每个文件切片大小定为5MB
       let sliceSize = 0.5 * 1024 * 1024;
       // 文件大小限制为最大1个G,可根据需求修改
       let maxfilesizes = 1 * 1024 * 1024 * 1024;
       const blob = file;
       const fileSize = blob.size; // 文件大小
       const fileName = blob.name; // 文件名
       //计算文件切片总数,Math.ceil向上取整数
       const totalSlice = Math.ceil(fileSize / sliceSize);
       if (fileSize <= maxfilesizes) {
          // 循环上传
          for (let j = 0; j < totalSlice; j++) {
              let start = j * sliceSize;
              let chunk = blob.raw.slice(start, Math.min(fileSize, start + sliceSize));
              console.log("每个切片的信息:", chunk);
              const formData = new FormData();
              formData.append("file", chunk);
              formData.append("fileName", fileName);
              formData.append("size", fileSize);
              formData.append("totalNo", totalSlice);
              formData.append("no", j + 1);
              formData.append("file_temp_name", Math.round(new Date().getTime() / 1000) + Math.floor(Math.random() * 10000));
              // 调用上传接口
              API.postUpload(formData).then(res => {
                 // 判断当前文件的最后一个切片是否已经上传完成
                 if (i + 1 == this.fileList.length && j + 1 == totalSlice) {
                    // 成功上传的操作 
                 }
              })
          }
       }
    }, (i + 1) * 1000);

以上代码实现了文件上传功能。首先,它检查文件列表是否为空,如果为空,则提示用户选择文件并返回。  

若文件列表不为空,则通过循环遍历文件列表,依次处理每个文件。

接着,设置文件切片大小为0.5MB,文件大小限制为最大1GB。

接下来,获取当前文件的大小和文件名,并计算文件需要被切割成多少个切片。

如果文件大小不超过最大文件大小限制,则通过循环将文件拆分成切片并上传。

每个切片的信息都会被打印输出。

上传前需要创建一个FormData对象,并添加需要传递给后端的参数和切片数据。

然后,调用上传接口进行上传操作。

当所有文件的所有切片上传完成时,执行成功上传的操作。

需要注意的是,在代码中使用了setTimeout函数来模拟延时上传,以防止一次性上传大量文件导致浏览器卡顿。每个文件上传的延时时间逐渐增加,以避免同时上传多

el-upload分片上传文件是一种将大文件分成多个小块进行上传的方法。在上传过程中,需要将每个切片正确地设置进度条。可以通过上传每个切片并设置进度条的方式来实现。具体的实现步骤如下: 1. 首先,需要将文件切成多个小块,每个小块称为一个切片(chunk)。可以使用Chunk类来表示每个切片的信息,包括切片的编号、大小、总大小、文件标识、文件名等信息。\[3\] 2. 在前端JavaScript部分,可以使用el-upload组件来进行文件上传。可以通过重写httpUploadFile方法来实现分片上传。在该方法中,可以调用cutFile方法将文件切片,并将切片上传到后台。\[2\] 3. 在cutFile方法中,可以使用FormData对象来包装每个切片,并通过ajax发送到后台。同时,需要设置contentType为false,processData为false,以确保ajax上传文件时不会对数据进行处理。在xhr函数中,可以添加文件上传的监听,通过onprogress事件来监听上传进度,并将进度信息设置到进度条中。\[1\] 4. 在后台的上传接口中,可以接收到每个切片的数据,并将其保存到服务器上。可以根据切片的编号、文件标识等信息来组装完整的文件。可以使用后台框架提供的文件上传功能来实现文件的保存和组装。 通过以上步骤,就可以实现el-upload分片上传文件,并正确设置进度条。 #### 引用[.reference_title] - *1* *2* [el-upload使用http-request切片上传以及使用base64压缩图片展示缩略图](https://blog.csdn.net/Sijin_Asu/article/details/125895799)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [elementUI大文件分片上传](https://blog.csdn.net/lxw1005192401/article/details/128201698)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值