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

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

news 2025/9/8 13:16:15

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

编程日记 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相关专题

前置知识&#xff1a;异或运算 异或运算介绍 异或有什么神奇之处&#xff08;应用&#xff09;&#xff1f; &#xff08;1&#xff09;快速比较两个值 &#xff08;2&#xff09;我们可以使用异或来使某些特定的位翻转&#xff0c;因为不管是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 是一款强大的分布式消息中间件&#xff0c;与 Spring Boot 集成后&#xff0c;通过 RocketMQTemplate 提供了多种方法来发送消息。其中&#xff0c;send() 和 syncSend() 是两个常用的发送消息方法&#xff0c;本文将深入探讨它们的区别以及详细解释这两个方法…...

编程日记 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. 说明&#xff1a; 此篇博客主要记录一种客户端实现方式&#xff0c;和两种使用poll或者epoll分别创建echo服务器的方式&#xff0c;具体可看代码注释&#xff1a; 2. 相关代码&#xff1a; 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模块：楼宇自动化的未来选择

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

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

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

效果图 实现方式&#xff0c;本功能使用PictureSelector 第三方库 。作者项目地址&#xff1a;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查询优化：枚举在条件构建中的妙用

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 仓库主页&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 欢迎点赞…...

编程日记 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 可编译运行代码见&#xff1a;GIithub::Data-Structures-Algorithms-and-Applications/_24Threaded_BinaryTree 线索二叉树定义 在普通二叉树中&#xff0c;有很多nullptr指针被浪费了&#xff0c;可以将其利用起来。 首先我们要来看看这空指针有多少…...

编程日记 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&#xff0c;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 两两交换链表中的节点

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

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

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

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

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

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

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

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

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

编程新知 2025/9/4 2:43:53

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/6/21 16:23:04

React Native 导航系统实战（React Navigation）

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

编程新知 2025/8/31 2:19:21

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/8/12 18:09:54

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/9/6 15:46:25

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

编程新知 2025/9/1 0:12:00

Linux离线（zip方式）安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

编程新知 2025/6/16 16:58:04

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

编程新知 2025/6/16 16:17:22

【MATLAB代码】基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），针对传感器观测数据中存在的脉冲型异常噪声问题，通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现，验证了后者在状态估计鲁棒性方面的显著优…...

编程新知 2025/9/2 17:49:07