首页 > 编程语言 >JavaScript_大文件切片上传

JavaScript_大文件切片上传

时间:2022-10-06 17:13:32浏览次数:85  
标签:chunk JavaScript upload 默认 bigfile 切片 上传

bigfile-chunk-upload

功能

大文件截取分块上传,带请求并发控制、错误重发功能。

教程(以Vue为例)

下载

npm install bigfile-chunk-upload

引入

// page.vue
import bigFileToChunkUpload from 'bigfile-chunk-upload';

使用

示例

async function beforeUpload(e) {
  const file = e.target.files[0]
  // 调用
  await bigFileToChunkUpload({
    file, // 文件对象
    uploadPromiseFn: upload, // 上传请求函数,promise
    againSend: false, // 是否失败重发,默认true
    chunkSize: 2, // 块大小,默认5M
    oneTimeFefchMaxCount: 4 // 并发请求,默认6个
  }).then(res => {
    // 上传操作完成,这里可以调用合并操作
  })
}

// 自定义上传函数,作为第二个参数传递,需要return Promise
function upload(data) {
  /**
   * data获取到 插件返回的切片数据、索引、切片文件名,方便自定义上传参数
   * data = {
   *    index: ${索引},
   *    name: `${文件名}_chunk${索引}.${文件类型}`,
   *    chunk: ${切片块_文件对象}
   * }
   **/
  return new Promise((resolve, reject) => {
    // 模拟请求
    setTimeout(() => {
      resolve('ok')
    }, 2000 + Math.random() * 1000)
  })
}

参数

bigFileToChunkUpload({
  file, // 文件对象
  uploadPromiseFn, // 上传请求函数,需要promise类型
  againSend = true, // 是否失败重发,默认true
  chunkSize = 5, // 块大小,默认5M
  oneTimeFefchMaxCount = 6 // 并发请求,默认6个
})

演示

http://zh1q1.net3v.net/bigfile/bigfileUpload.html

标签:chunk,JavaScript,upload,默认,bigfile,切片,上传
From: https://www.cnblogs.com/zh1q1/p/16758007.html

相关文章

  • go sftp上传文件
    gosftp上传文件步骤使用"golang.org/x/crypto/ssh"连接到Linux环境使用"github.com/pkg/sftp"创建sftp客户端然后传输文件packagemainimport("fmt""gith......
  • numpy - 数组的切片
    导入数组的常用模块importnumpyasnp#创建一个多维数组arr=np.random.randint(0,100,size=(5,5))arr在这里,我们创建了一个五行五列的二维数组array([[1......
  • JavaScript 面试问题
    参考:https://github.com/lydiahallie/javascript-questions/语法......
  • 深入理解 JavaScript
    原型和继承__proto__属性对象有一个隐藏属性[[Prototype]],指向其原型(父类型),如果没有原型则为null。从对象中读取一个不存在的属性时,会自动往原型中查找这个属性,这就......
  • JavaScript 基础
    1.对象对象创建创建对象的两种方法:构造函数:letuser=newObject();字面量:letuser={};对象是属性可以随意添加:点号:user.name="Mason"方括号:user["age"]=26......
  • 1.6 数据结构_列表 lst[index],lst.append(obj),lst[index]=obj,lst.remove(obj),for...i
    #列表的数据处理  #1.获取元素:lst[index]  #2.新增元素:lst.append(obj) #3.修改元素:lst[index]=obj #4.删除元素:lst.remove(obj) #5.列表元素很多批......
  • 如何将一个 JavaScript 数组打乱顺序
    当我们想将现有的数组打乱顺序,有两个方法:1.Array.prototype.sort()数组的sort()方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串......
  • JavaScript回调函数
    在百度百科中,回调函数的定义就是一个被作为参数传递的函数。通俗地理解:我现在写一个函数,里面定义了函数A,那么函数A就是回调函数。以前我认为JavaScript不过是......
  • JavaScript水平滚动菜单切换
         完整代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><met......
  • day09 --> 【JavaScript(BOM、DOM事件)】
    DOM简单学习:为了满足案例要求功能:控制HTML文档的内容代码:获取页面标签(/亦叫元素)对象Elementdocument.getElementById("id值");通过元素的id值获取元素对象操作Elemen......