light-upload/README.md

The most powerful lightweight file upload component. Based on JS worker thread technology, it supports multi-threaded file uploads, uploads of files of any size, resumable uploads, and concurrent uploads. File uploads do not block the UI main thread. Note

# LightUpload

最强大的轻量化浏览器端文件上传组件，基于js的worker线程技术的多线程文件上传组件，支持任意大小的大文件上传，支持断点续传，支持并发上传，当文件上传时不会阻塞UI主线程。注意：这是react的前端组件，你需要自己实现后端接口，或者你也可以联系作者(max_wang7788@163.com)提供成熟的后端组件（node/bun, java或者go版本）。
<br>
The most powerful lightweight browser-side file upload component. Based on JS worker thread technology, it supports multi-threaded file uploads, uploads of files of any size, resumable uploads, and concurrent uploads. File uploads do not block the UI main thread. Note: This is a React frontend component. You need to implement the backend interface yourself, or you can contact the author to provide a mature backend component (node/bun, java, or go version) at：max_wang7788@163.com.

## Installation / 安装

## 安装

```bash
npm install light-upload
# 或者
yarn add light-upload
、、、

## 配置 Tailwind CSS
为了确保 light-upload 组件的样式能被正确应用，你需要将组件库的路径添加到你的 tailwind.config.js 文件中的 content 数组里。

tailwind.config.js

、、、

/** @type { import ( 'tailwindcss' ) .Config } */

module . exports = {

content: [

"./src/**/*.{js,ts,jsx,tsx}" , // 你自己项目的源

文件路径

"./node_modules/light-upload/dist/**/*.{js,

ts,jsx,tsx}" , //Add this line,  添加这一行来扫描 light-upload

组件

// 其他需要扫描的路径...

] ,

theme: {

extend: { } ,

} ,

plugins: [ ] ,

}

、、、

注意: 请确保你的项目中已经安装并配置了 Tailwind CSS。

# LightUpload

最强大的轻量化浏览器端文件上传组件，基于js的worker线程技

术的多线程文件上传组件，支持任意大小的大文件上传，支持断点

续传，支持并发上传，当文件上传时不会阻塞UI主线程。注意：这

是react的前端组件，你需要自己实现后端接口，或者你也可以联

系作者(max_wang7788@163.com)提供成熟的后端组件（node/

bun, java或者go版本）。

< br >

The most powerful lightweight browser-side file

upload component. Based on JS worker thread

technology, it supports multi-threaded file

uploads, uploads of files of any size, resumable

uploads, and concurrent uploads. File uploads do

not block the UI main thread. Note: This is a

React frontend component. You need to implement

the backend interface yourself, or you can

contact the author to provide a mature backend

component (node/bun, java, or go version) at：

max_wang7788@163.com.

## Installation / 安装

```bash

npm install light-upload

## Usage / 使用方法
、、、
import React, { useRef } from 'react';
import { LightUpload } from 'light-upload';
// 假设你有一个按钮组件, 例如: import { Button } from '@/components/ui/button';
import { Button } from './your-button-component'; 

function MyComponent() {
  const triggerRef = useRef(null);

  return (
    <div>
      {/* 方法一：使用默认触发器 */}
      <LightUpload lang='zh' uploadServer='http://your-backend-server:4000' />

      <hr style={{ margin: '20px 0' }} />

      {/* 方法二：使用自定义触发器 */}
      <Button ref={triggerRef}>选择文件</Button>
      {/* 将 LightUpload 放在按钮旁边或任何你希望的位置 */}
      <LightUpload trigger={triggerRef} lang='en' uploadServer='http://your-backend-server:4000' />
    </div>
  );
}

export default MyComponent;
、、、

## Props / 属性
- lang (string, optional): 设置组件语言。支持 'en', 'zh', 'ja'。默认为 'en'。 (Sets the component language. Supports 'en', 'zh', 'ja'. Defaults to 'en'.)
- uploadServer (string, required): 后端上传服务的 URL。 (The URL of your backend upload service.)
- trigger (React.RefObject, optional): 一个指向触发上传按钮的 ref。如果提供，组件本身不显示触发区域，而是监听此 ref 元素的点击事件来弹出文件选择框。 (A ref pointing to a trigger button/element. If provided, the component itself won't render a trigger area but will listen for clicks on this ref'd element to open the file dialog.)
- chunkSize (number, optional): 文件分片大小（字节）。默认为 1MB (1 * 1024 * 1024 bytes)。 (The size of file chunks in bytes. Defaults to 1MB.)
## Backend / 后端实现
你需要实现一个支持分片上传和断点续传的后端服务。可以联系作者(max_wang7788@163.com)获取示例或成熟的后端组件。
(You need to implement a backend service that supports chunked uploads and resumable uploads. Contact the author(max_wang7788@163.com) for examples or mature backend components.)