npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@claiyre/nim-upload

v1.0.0

Published

A helpful library for uploading files on web

Downloads

5

Readme

nim-upload

JavaScript Style Guide

A helpful library for uploading files on web.

Features

  • web文件上传
  • 断点续传
  • 文件状态管理
  • 云信点播上传流程封装
  • 点播上传接口鉴权

Demo

npm install
npm run build
npm run demo

Installation

npm install nim-uploader --save
// or
<script src="..../uploader.js"></script>
// or
<script src="..../uploader.min.js"></script>

Usage

import Uploader from 'nim-uploader'

let loader = new Uploader({
  target: 'xxx',           /* required, File/File数组/FileList/Input[type='file']DOM */
  trunkSize: 4*1024*1024,  /* 分片大小 */
  fileExts: [],            /* 可接受的文件类型数组 */
  Nouce: 'xxx',            /* 用于接口鉴权,只有Nouce, AppKey, CheckSum, CurTime都传入时,才会进行接口鉴权 */
  AppKey: 'xxx',
  CheckSum: 'xxx',
  CurTime: 'xxx',
  onError/onAdded/onProgress/onUploaded/onFileTypeNotMatch: Function  /* 事件监听函数 */
})

attr

  • loader.fileList: Array, 由 富文件对象 组成的数组
  • loader.trunksize: {Number} 分片大小,最大4M,默认为4M
  • loader.fileExts: Array 可接受的文件类型数组, 默认接受所有类型的文件

api

  • loader.uploadFile(fileKey): 上传文件
  • loader.uploadAll(): 上传 fileList 中的所有文件
  • loader.addFile(param): 向fileList 中添加文件, param可以是File/FileList/File数组
  • loader.removeFile(fileKey): 从 fileList 中移除某文件
  • loader.findFile(filekey): 根据fileKey得到NimFile实例对象
  • loader.on('eventname', listener): 添加事件监听

其中uploadFile, uploadAll可以继续传入两个函数参数,作为上传成功和失败的回调,也可不传,返回Promise对象

event Listener

  • onError(err): 发生错误时调用
  • onAdded(fileKey): 文件添加到fileList中调用
  • onProgress(p, filekey): 上传进度变化时调用 p是小数(保留四位)
  • onUploaded(fileKey): 文件上传完成后调用
  • onAllUploaded(fileKeyArr): 文件批量上传成功后调用
  • onFileTypeNotMatch(format): 上传文件类型不匹配时调用(仅当 fileExts 被指定时才可能会触发)

event listener 可以在实例初始化时添加,如:

let uploader = new Uploader({
  /* 其他参数 */
  onError: function (err) { console.error(err) },
  onAdded: function (fileKey) { /* ... */ }
})

也可在初始化后通过on方法添加:

uploader.on('allUploaded', function(fileKeyArr) {
  /* ... */
})

富文件对象

富文件对象是自定义的,包含更多文件信息和api的对象。其属性有

  • fileKey: 文件的唯一标识,通过md5(file.name + ':' + file.size)生成
  • file: 实际的 File 对象
  • fileName: 文件名称
  • format: 文件后缀名
  • size: 文件大小
  • checked: 是否被选中,默认为true
  • status: 文件状态,0: 等待上传 1: 上传中 2: 上传完毕
  • progress: 文件的上传进度,小数 保留四位