当前位置：首页 > news >正文

前端大文件上传webuploader(react + umi)

news 2026/5/15 11:11:28

使用WebUploader还可以批量上传文件、支持缩略图等等众多参数选项可设置，以及多个事件方法可调用，你可以随心所欲的定制你要的上传组件。

分片上传

1.什么是分片上传
分片上传，就是将所要上传的文件，按照一定的大小，将整个文件分隔成多个数据块（我们称之为Part）来进行分别上传，上传完之后再由服务端对所有上传的文件进行汇总整合成原始的文件。

2.分片上传的场景

1.大文件上传

2.网络环境环境不好，存在需要重传风险的场景

断点续传

1、什么是断点续传
断点续传是在下载或上传时，将下载或上传任务（一个文件或一个压缩包）人为的划分为几个部分，每一个部分采用一个线程进行上传或下载，如果碰到网络故障，可以从已经上传或下载的部分开始继续上传或者下载未完成的部分，而没有必要从头开始上传或者下载。本文的断点续传主要是针对断点上传场景。

2、应用场景
断点续传可以看成是分片上传的一个衍生，因此可以使用分片上传的场景，都可以使用断点续传。

具体使用

1.引入库

使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF。

先将webuploader.js , webuploader.css , jquery.min.js 放到静态资源public/scripts 文件中如：

在这里插入图片描述
由于我是react + Umi 的项目，在config.ts 文件中进行配置，所以导入方式：

links: [{href: './scripts/webuploader.css',rel: 'preload',},],/*** @name <head> 中额外的 script* @description 配置 <head> 中额外的 script*/headScripts: [// 解决首次加载时白屏的问题{ src: '/scripts/loading.js', async: true },{src: '/scripts/jquery.min.js',charset: 'utf-8',type: 'text/javascript',},{src: '/scripts/webuploader.js',charset: 'utf-8',type: 'text/javascript',},// `https://sandcastle.cesium.com/Sandcastle-header.js`,`window.WebUploader = WebUploader`,],

2.业务组件

index.ts

<div><div id="upload-container"><span>点击或者拖拽到此处上传</span></div><span id="picker" class="showclass">点击上传文件</span>{uploading && (<>{uploader.current.getFiles()?.[0].name}<Progress percent={percent} /></>)}
</div>

3.初始化

从前端代码可以看出上传文件为一个span文本，Web Uploader将其初始化成为
一个可以上传文件的按钮

import { useRef, useEffect, useState } from "react";
import {Progress,
} from "antd";
const Index = () => {const uploader = useRef(null as any);const [percent, setPercent] = useState(0);const [errRes, setErrRes] = useState({} as any);const [uploading, setUploading] = useState(false);useEffect(() => {$('#upload-container').click(function(event) {$("#picker").find('input').click();});// 取消上传$('.upload-list').on('click', '.btn-remove', function(){// 从文件队列中删除某个文件idfile_id = $(this).data('id');uploader.current.removeFile(file_id, true); // 从队列中删除// console.log(uploader.getFiles()) // 队列显示还在  其实已经删除});// 重新上传$('.upload-list').on('click', '.upload-item__progress span', function(){uploader.current.retry($(this).data('file'));});// 刷新容器（解决文件上传按钮失效问题）$("#picker").hide();$('#forecastSelect4').change(function(){$("#picker").show();uploader.refresh();//刷新容器 解决隐藏后失效问题});initUploader();});const initUploader = () => {const { WebUploader } = window as any;uploader.current = WebUploader.create({auto: false, // 选完文件后，是否自动上传。//duplicate:true, // 可重复上传swf: "/Uploader.swf", // swf文件路径server: "/api/data/xxx", // 文件接收服务端。pick: {id: "#picker",label: "Select Data File",multiple: false,}, // 内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id// multiple: true, // 选择多个chunked: true, // 开起分片上传。threads: 5, // 上传并发数。允许同时最大上传进程数。method: "POST", // 文件上传方式，POST或者GET。// fileSizeLimit: 1024 * 1024 * 100 * 100, //验证文件总大小是否超出限制, 超出则不允许加入队列。// fileSingleSizeLimit: 1024 * 1024 * 100 * 100, //验证单个文件大小是否超出限制, 超出则不允许加入队列。formData: {},fileVal: "file", // [默认值：'file'] 设置文件上传域的name。accept: {title: "package",extensions: "tar.gz,tgz,tar,zip",mimeTypes: ".tar.gz,.tgz,.tar,.zip",},headers: {token: localStorage.getItem("token"),},});uploader.current.on("uploadBeforeSend",async function ({ file }: any, data: any) {// data.md5 = file.md5; // md5 在父组件中提前一步注册if (data.hasOwnProperty("chunk")) {data.chunk = data.chunk + 1;} else {data.chunk = 1;}});uploader.current.on("beforeFileQueued", async (file: any) => {uploader.current.reset();});// 1.添加文件到队列时uploader.current.on("fileQueued", async (file: any) => {form.validateFields().then((values: any) => {createProjectRequest({project_name: values.project_name,sub_project_name: values.sub_project_name,}).then((res: any) => {setUploading(true);fileRef.current = file;subPid.current = res.sub_project_id;uploader.current.upload();});}).catch((err: any) => {uploader.current.reset();});});// 2.文件上传过程中添加进度显示uploader.current.on("uploadProgress", (file: any, p: number) => {const _p = Math.floor(p * 100);setPercent(_p > 99.99 ? 99.99 : _p);});// 3.文件上传成功或失败时触发uploader.current.on("uploadSuccess", (file: any, response: any) => {completeProjectData({name: file.name,size: file.size,sub_project_id: subPid.current,}).then((res) => {setPercent(100);message.success("导入成功");}).catch(() => {setPercent(100);});});
}export default Index;

OK，收工！如果可以实现记得点赞分享，谢谢老铁～

前端大文件上传webuploader(react + umi)

使用WebUploader还可以批量上传文件、支持缩略图等等众多参数选项可设置，以及多个事件方法可调用，你可以随心所欲的定制你要的上传组件。分片上传 1.什么是分片上传分片上传，就是将所要上传的文件，按照一定的大小，将…...

编程日记 2023/12/6 10:16:58

人大金仓（kingbase）数据库常用sql命令

一. 字段 1. 添加 alter table book add column book_id varchar not null, book_title varchar(10) default ;2. 删除 alter table book drop book_id, book_title;// 外键时 alter table book drop book_id, book_title cascade;3. 修改类型 alter table book alter colu…...

编程日记 2023/12/6 10:14:56

HashMap相关专题

前置知识：异或运算异或运算介绍异或有什么神奇之处（应用）？ （1）快速比较两个值 （2）我们可以使用异或来使某些特定的位翻转，因为不管是0或者是1与1做异或将得到原值的相…...

编程日记 2023/12/6 10:12:54

threejs WebGLRenderer 像素比对画布大小的影响

官方文档 - WebGLRenderer .setPixelRatio ( value : number ) : undefined 设置设备像素比。通常用于避免HiDPI设备上绘图模糊 .setSize ( width : Integer, height : Integer, updateStyle : Boolean ) : undefined 将输出canvas的大小调整为(width, height)并考虑设备像素比…...

编程日记 2023/12/6 10:10:52

RocketMQTemplate.send() 与 RocketMQTemplate.syncSend() 方法详解

Apache RocketMQ 是一款强大的分布式消息中间件，与 Spring Boot 集成后，通过 RocketMQTemplate 提供了多种方法来发送消息。其中，send() 和 syncSend() 是两个常用的发送消息方法，本文将深入探讨它们的区别以及详细解释这两个方法…...

编程日记 2023/12/6 10:09:51

波奇学C++：类型转换和IO流

隐式类型转换 int i0; double pi; 强制类型转换 int* pnullptr; int a(int)p; 单参数构造函数支持隐式类型转换 class A { public:A(string a):_a(a){} private:string _a; }; A a("xxxx"); //"xxx" const char* 隐式转换为string 多参数也可以通过{…...

编程日记 2023/12/6 10:07:49

集成开发环境 PyCharm 的安装【侯小啾python基础领航计划系列（二）】

集成开发环境PyCharm的安装【侯小啾python基础领航计划系列（二）】大家好，我是博主侯小啾， 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔…...

编程日记 2023/12/6 10:05:48

Java核心知识点整理大全27-笔记（已完结）

目录 30. 云计算 30.1.1. SaaS 30.1.2. PaaS 30.1.3. IaaS 30.1.4. Docker 30.1.4.1. 概念 30.1.4.2. Namespaces 30.1.4.3. 进程(CLONE_NEWPID 实现的进程隔离) 30.1.4.4. Libnetwork 与网络隔离 30.1.4.5. 资源隔离与 CGroups 30.1.4.6. 镜像与 UnionFS 30.1.4.7.…...

编程日记 2023/12/6 10:04:47

1. 使用poll或epoll创建echo服务器

1. 说明： 此篇博客主要记录一种客户端实现方式，和两种使用poll或者epoll分别创建echo服务器的方式，具体可看代码注释： 2. 相关代码： 2.1 echoClient.cpp #include <iostream> #include <cstdio> #incl…...

编程日记 2023/12/6 10:03:46

【对象数组根据属性排序】

// sort使用的排序方法 // 传入对象数组用于排序的对象的属性,升序/降序 function compare(property, sortType "asc") {debugger// 如果不是 asc,desc,不做下一步比较if (!(sortType "desc" || sortType "asc")) {return;}return function (…...

编程日记 2023/12/6 9:58:42

BACnet I/O模块：楼宇自动化的未来选择

在楼宇自动化领域，BACnet通信协议在确保设备之间无缝高效的数据交换方面发挥着至关重要的作用。该领域使用广泛的协议是BACnet。它使传感器、执行器和控制器等设备能够相互通信，从而促进工业过程的自动化。 BACNET介绍 BACnet是专门为楼宇自动化和控制系…...

编程日记 2023/12/6 9:56:40

android项目实战之使用框架集成多图片、视频的上传

效果图实现方式，本功能使用PictureSelector 第三方库。作者项目地址：https://github.com/LuckSiege/PictureSelector 1. builder.gradle 增加 implementation io.github.lucksiege:pictureselector:v3.11.1implementation com.tbruyelle.rxpermissio…...

编程日记 2023/12/6 9:54:38

MyBatis查询优化：枚举在条件构建中的妙用

🚀 作者主页： 有来技术 🔥 开源项目： youlai-mall 🍃 vue3-element-admin 🍃 youlai-boot 🌺 仓库主页： Gitee 💫 Github 💫 GitCode 💖 欢迎点赞…...

编程日记 2023/12/6 9:48:33

Isaac Sim教程04 Isaac Sim的高级使用

Isaac Sim 高级使用版权信息 Copyright 2023 Herman YeAuromix. All rights reserved.This course and all of its associated content, including but not limited to text, images, videos, and any other materials, are protected by copyright law. The author holds…...

编程日记 2023/12/6 9:47:32

《数据结构、算法与应用C++语言描述》-线索二叉树的定义与C++实现

_23Threaded BinaryTree 可编译运行代码见：GIithub::Data-Structures-Algorithms-and-Applications/_24Threaded_BinaryTree 线索二叉树定义在普通二叉树中，有很多nullptr指针被浪费了，可以将其利用起来。首先我们要来看看这空指针有多少…...

编程日记 2023/12/6 9:46:31

删除误提交的 git commit

背景描述某次的意外 commit 中误将密码写到代码中并且 push 到了 remote repo 里面, 本文将围绕这个场景讨论如何弥补. 模拟误提交操作在 Gitee 创建一个新的 Repo, clone 到本地 git clone https://gitee.com/lpwm/myrepo.git创建两个文件, commit 后 push 到 remote 作…...

编程日记 2023/12/6 9:43:28

机器学习---pySpark案例

1、统计PV，UV 1.if __name__ __main__: 2. conf SparkConf() 3. conf.setMaster("local") 4. conf.setAppName("test") 5. sc SparkContext(confconf) 6. 7. #pv 8. sc.textFile("./pvuv").map(lambda line:(l…...

编程日记 2023/12/6 9:42:27

【链表Linked List】力扣-24 两两交换链表中的节点

目录题目描述解题过程题目描述给你一个链表，两两交换其中相邻的节点，并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题（即，只能进行节点交换）。示例 1： 输入：he…...

编程日记 2023/12/6 9:41:26

企业微信协议开发，API接口调用

产品说明一、 hook版本：企业微信hook接口是指将企业微信的功能封装成dll，并提供简易的接口给程序调用。通过hook技术，可以在不修改企业微信客户端源代码的情况下，实现对企业微信客户端的功能进行扩展和定制化。企业微信hook接口…...

编程日记 2023/12/6 9:40:24

代码随想录算法训练营 ---第五十五天

今天是动态规划：编辑距离问题。第一题： 简介： 动态规划五部曲： 1.确定dp数组的含义 dp[i][j] 表示以下标i-1为结尾的字符串s，和以下标j-1为结尾的字符串t，相同子序列的长度为dp[i][j]。 2.确定递推公…...

编程日记 2023/12/6 9:39:23

【Oracle数据库指南】第45篇：Oracle SQL优化基础

上一篇【第44篇】Oracle性能监控——关键指标与工具下一篇【第46篇】# Oracle内存与参数调优摘要 SQL优化是Oracle DBA和开发人员必须掌握的核心技能。一条低效的SQL不仅自身执行慢，还会消耗大量CPU、I/O和内存资源，影响整个数据库的性能。本文从执行…...

编程新知 2026/5/15 10:37:10

SIGLENT SDS2000示波器核心技术解析与应用

1. SIGLENT SDS2000系列超荧光示波器深度解析作为一名电子测试测量行业的老兵，当我第一次接触到SIGLENT SDS2000系列示波器时，那种惊艳感至今记忆犹新。这款2013年发布的设备在当时堪称国产示波器的里程碑之作，其110,000 wfs/s的波形捕获率和…...

编程新知 2026/5/15 9:47:27

终极Navicat无限重置教程：3种方法解决Mac版14天试用限制

终极Navicat无限重置教程：3种方法解决Mac版14天试用限制【免费下载链接】navicat_reset_mac navicat mac版无限重置试用期脚本 Navicat Mac Version Unlimited Trial Reset Script 项目地址: https://gitcode.com/gh_mirrors/na/navicat_reset_mac 还在为Na…...

编程新知 2026/5/15 9:47:23

The Most Dangerous Writing App 快速入门指南：如何在5秒内开始高效写作

The Most Dangerous Writing App 快速入门指南：如何在5秒内开始高效写作【免费下载链接】themostdangerouswritingapp If you stop typing for more than five seconds, all progress will be lost. 项目地址: https://gitcode.com/gh_mirrors/th/themostdangero…...

编程新知 2026/5/15 9:19:50

阿里健康年营收342亿：净利19亿 CFO屠燕武辞职

雷递网雷建平 5月14日阿里健康（股份代号：00241）今日发布截至2026年3月31日的财报。财报显示，截至2026年3月31日的年度，阿里健康营收为342.55亿元，较上年同期的306亿元增长12%。截至2026年3月31日的年度&am…...

编程新知 2026/5/15 9:07:37

大语言模型角色扮演：从提示工程到智能体框架的完整指南

1. 项目概述：当大语言模型学会“扮演”角色如果你最近在关注大语言模型（LLM）的应用，可能会发现一个有趣的现象：单纯让模型回答“11等于几”或者写一封邮件，已经越来越难以满足我们的好奇心和实际需求了。一…...

编程新知 2026/5/15 8:45:03

TypeScript函数式编程实战：fp-ts生产级应用技巧与模式解析

1. 项目概述：从类型体操到生产级函数式编程如果你在TypeScript社区里混迹过一段时间，大概率听说过或者用过fp-ts这个库。它把Haskell风格的函数式编程范式带到了TypeScript世界，提供了Option、Either、Task、Reader等一系列强大的代数数据类型…...

编程新知 2026/5/15 8:38:46

网盘下载提速新方案：8大平台直链获取工具全解析

网盘下载提速新方案：8大平台直链获取工具全解析【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 ，支持百度网盘 / 阿里云盘 / 中国移动云盘 / 天翼云盘 /…...

编程新知 2026/5/15 7:23:15

开源AI智能体dreamGPT：让大语言模型学会自主思考与目标探索

1. 项目概述：当AI学会“做梦”，一个开源智能体的自我进化实验最近在开源社区里，一个名为dreamGPT的项目引起了我的注意。它来自 DivergentAI，名字本身就充满了想象力——“梦想GPT”。这可不是一个简单的聊天机器人或者代码生成工…...

编程新知 2026/5/15 6:59:50

Lancet Digit Health（IF=24.1）广东省人民医院刘再毅amp；南方医科大学南方医院梁莉等团队：基于可解释深度学习模型预测胶质瘤分子改变

01文献学习今天分享的文献是由广东省人民医院放射科刘再毅、南方医科大学南方医院梁莉等团队于2026年5月11日在柳叶刀旗下数字健康领域顶刊《The Lancet Digital Health》（中科院1区top，IF24.1）上发表的研究“Molecular alterations predicti…...

编程新知 2026/5/15 6:55:48