npm 包 @jaypy.code/upload-sdk 使用教程

介绍

在前端开发中，文件上传是个常见的需求，有许多第三方上传组件可供使用。其中，npm 包 @jaypy.code/upload-sdk 是一个可以帮助我们完成文件上传的工具，它使用了现代的上传技术，支持多文件上传、断点续传、二进制流和 Form 表单两种上传方式。

安装

你可以使用 npm 包管理器，快速安装该包。

npm install @jaypy.code/upload-sdk --save

使用

初始化上传器

使用 upload-sdk 前，需要先进行初始化。初始化 upload-sdk 时，可以设置一些默认的配置信息，比如上传地址、分片大小等。示例代码如下：

import { Uploader } from '@jaypy.code/upload-sdk'
const options = {
  url: 'http://youruploadurl.com', // 上传地址
  chunkSize: 1024 * 1024, // 分片大小
  maxConnections: 3, // 最大并发连接数
  retryCount: 3, // 失败重试次数
  headers: { // 请求头
    token: 'yourToken'
  }
}
const uploader = new Uploader(options)

单文件上传

单文件上传只需调用 upload 方法即可，参数为单个文件对象。上传过程中会触发不同阶段的事件回调函数，如开始、上传中、上传完成和上传失败等。示例代码如下：

const file = document.getElementById('fileInput').files[0]
uploader.upload(file, {
  onStart: (file) => {
    console.log(`上传 ${file.name}：开始`)
  },
  onProgress: (file, percent) => {
    console.log(`上传 ${file.name}：${percent}%`)
  },
  onSuccess: (file, response) => {
    console.log(`上传 ${file.name}：成功`)
  },
  onError: (file, error) => {
    console.log(`上传 ${file.name}：失败`)
  }
})

多文件上传

文件多选后，可以使用 uploadFiles 方法上传所有文件。上传过程中也会触发不同阶段的事件回调函数。示例代码如下：

const files = document.getElementById('fileInput').files
uploader.uploadFiles(files, {
  onStart: (file) => {
    console.log(`上传 ${file.name}：开始`)
  },
  onProgress: (file, percent) => {
    console.log(`上传 ${file.name}：${percent}%`)
  },
  onSuccess: (file, response) => {
    console.log(`上传 ${file.name}：成功`)
  },
  onError: (file, error) => {
    console.log(`上传 ${file.name}：失败`)
  }
})

断点续传

上传大文件时，遇到网络异常或上传中途停止，文件上传会失败。为了避免因网络问题导致文件上传失败的情况，我们可以使用断点续传的功能。当上传大文件时，上传器会将文件分成多个分片，每个分片完成上传后，上传器会在本地记录上传进度。当上传中途停止时，重新启动上传器，它会检查本地上传进度，并从上一次上传的进度继续上传。示例代码如下：

const file = document.getElementById('fileInput').files[0]
const resumeUploader = new Uploader(options)
resumeUploader.upload(file, {
  resume: true, // 开启断点续传
  onStart: (file) => {
    console.log(`上传 ${file.name}：开始`)
  },
  onProgress: (file, percent) => {
    console.log(`上传 ${file.name}：${percent}%`)
  },
  onSuccess: (file, response) => {
    console.log(`上传 ${file.name}：成功`)
  },
  onError: (file, error) => {
    console.log(`上传 ${file.name}：失败`)
  }
})

上传二进制流

如果我们需要上传二进制文件流，可以使用 uploadBlob 方法，该方法接受二进制流和文件名称两个参数。示例代码如下：

const blobData = new Blob(['hello world'])
uploader.uploadBlob(blobData, 'hello.txt', {
  onStart: (file) => {
    console.log(`上传 ${file.name}：开始`)
  },
  onProgress: (file, percent) => {
    console.log(`上传 ${file.name}：${percent}%`)
  },
  onSuccess: (file, response) => {
    console.log(`上传 ${file.name}：成功`)
  },
  onError: (file, error) => {
    console.log(`上传 ${file.name}：失败`)
  }
})

上传 Form 表单

我们也可以上传表单数据，只需将表单对象作为参数传入 uploadForm 方法中即可。上传过程中，上传器会自动将表单数据转换为二进制流进行上传。示例代码如下：

const form = new FormData()
form.append('name', 'jaypy')
form.append('age', 18)
uploader.uploadForm(form, {
  onStart: (file) => {
    console.log(`上传 ${file.name}：开始`)
  },
  onProgress: (file, percent) => {
    console.log(`上传 ${file.name}：${percent}%`)
  },
  onSuccess: (file, response) => {
    console.log(`上传 ${file.name}：成功`)
  },
  onError: (file, error) => {
    console.log(`上传 ${file.name}：失败`)
  }
})

结语

本文介绍了 @jaypy.code/upload-sdk 的使用方法，读者可以自行在自己的项目中使用该包，来方便的完成文件上传功能。同时，在使用过程中可以根据自身需求，自定义配置信息来获得更好的使用效果。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673dffb81d47349e53c98