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

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

news 2025/7/4 0:45:16

使用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

JavaSec-RCE

简介 RCE(Remote Code Execution)，可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景：Groovy代码注入 Groovy是一种基于JVM的动态语言，语法简洁，支持闭包、动态类型和Java互操作性&#xff0c…...

编程新知 2025/6/27 10:08:38

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍软件包管理工具dpkg dpkg核心指令详解安装软件包卸载软件包查询软件包状态验证软件包完整性手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核的 Linux 发行版&#xff…...

编程新知 2025/7/1 11:28:05

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句，它能够让用户直接在浏览器内练习SQL的语法，不需要安装任何软件。链接如下： sqliteviz 注意： 在转写SQL语法时，关键字之间有一个特定的顺序，这个顺序会影响到…...

编程新知 2025/6/26 7:32:06

【论文笔记】若干矿井粉尘检测算法概述

总的来说，传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度，通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/7/3 22:46:36

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2025/6/24 6:09:01

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题安装 flash-attn 会一直卡在 build 那一步或者运行报错解决办法是因为你安装的 flash-attn 版本没有对应上，所以报错，到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本，cu、torch、cp 的版本一定要对…...

编程新知 2025/6/15 5:19:16