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

使用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,收工!如果可以实现记得点赞分享,谢谢老铁~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/197804.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Langchain-Chatchat的安装过程

参考&#xff1a;LLMs之RAG&#xff1a;LangChain-Chatchat(一款中文友好的全流程本地知识库问答应用)的简介(支持 FastChat 接入的ChatGLM-2/LLaMA-2等多款主流LLMs多款embe_一个处女座的程序猿的博客-CSDN博客 1、安装过程中出现了 GPU驱动版本 是11.8 而 python -c "…

探索人工智能领域——每日20个名词详解【day8】

目录 前言 正文 总结 &#x1f308;嗨&#xff01;我是Filotimo__&#x1f308;。很高兴与大家相识&#xff0c;希望我的博客能对你有所帮助。 &#x1f4a1;本文由Filotimo__✍️原创&#xff0c;首发于CSDN&#x1f4da;。 &#x1f4e3;如需转载&#xff0c;请事先与我联系以…

学习使用三个命令实现在腾讯云服务器TencentOS Server 3.1或者CentOS 8上安装ffmpeg

学习使用三个命令实现在腾讯云服务器TencentOS Server 3.1或者CentOS 8上安装ffmpeg Error: Unable to find a match: ffmpeg添加RPMfusion仓库安装SDL安装ffmpeg执行命令测试 Error: Unable to find a match: ffmpeg 添加RPMfusion仓库 yum install https://download1.rpmfus…

Vue3动态表单

示例代码如下&#xff1a; // 引入需要的依赖包 import { ref, reactive } from vue; import { useForm } from /composables/useForm;// 定义表单数据模型 const formModel reactive({name: ,age: ,gender: , });// 使用自定义的useForm函数创建表单实例 const { register, …

[Java学习日记]多线程练习、线程池

目录 一.案例&#xff1a;五个人抢红包 二.案例&#xff1a;两个抽奖池抽奖 三.案例&#xff1a;两个抽奖池抽奖&#xff1a;获取线程运行的结果 四.线程池&#xff1a;用来存放线程&#xff0c;避免多次重复创建线程 五.自定义线程池 六.最大并行数与线程池大小 一.案例&…

Python核心编程之认识python中的数字

目录 一、数字类型 如何创建数值对象并用其赋值 (数字对象) 如何更新数字对象

PTA 7-237 特殊排序

输入一个整数n和n个各不相等的非负整数&#xff0c;将这些整数从小到大进行排序&#xff0c;要求奇数在前&#xff0c;偶数在后。 输入格式: 首先输入一个正整数T&#xff0c;表示测试数据的组数&#xff0c;然后是T组测试数据。每组测试先输入一个整数n(1<n<100)&…

记录33333

如果您在一台从服务器上将 backend_flag0 设置为 DISALLOW_TO_FAILOVER&#xff0c;则意味着这台从服务器不会接管主服务器的角色&#xff0c;即不会成为新的主服务器&#xff0c;也不会参与故障切换。这种配置可能会影响环境的高可用性和故障恢复。以下是一个示例以更好地理解…

三端多人游戏冰雪搭建教程

--------------------------------------------------------------------------------------------------- CENTOS7系列 --------------------------------------------------------------------------------------------------- 安装宝塔 yum install -y wget && …

前端知识笔记(二十六)———React如何像Vue一样将css和js写在同一文件

如果想在React中想要像Vue一样把css和js写到一个文件中&#xff0c;可以使用CSS-in-JS。 使用CSS-in-JS 下载 npm i styled-components使用 就像写scss一样&#xff0c;不过需要声明元素的类型 基本语法及展示如下 import styled from "styled-components"expor…

【EI会议征稿】第九届电气、电子和计算机工程研究国际学术研讨会 (ISAEECE 2024)

第九届电气、电子和计算机工程研究国际学术研讨会 (ISAEECE 2024) 2024 9th International Symposium on Advances in Electrical, Electronics and Computer Engineering 第九届电气、电子和计算机工程研究国际学术研讨会(ISAEECE 2024&#xff09;将于2024年3月1-5日在南京…

AWS攻略——创建VPC

文章目录 创建一个可以外网访问的VPCCIDR主路由表DestinationTarget 主网络ACL入站规则出站规则 子网创建EC2测试连接创建互联网网关&#xff08;IGW&#xff09;编辑路由表 知识点参考资料 在 《AWS攻略——VPC初识》一文中&#xff0c;我们在AWS默认的VPC下部署了一台可以SS…

鸿蒙4.0开发笔记之ArkTS装饰器语法基础之监听者模式@Watch案例讲解(十四)

1、Watch定义 Watch实际是指状态变量更改通知。如果开发者需要关注某个状态变量的值是否改变&#xff0c;可以使用Watch为状态变量设置回调函数&#xff08;监听函数&#xff09;。 Watch用于监听状态变量的变化&#xff0c;当状态变量变化时&#xff0c;Watch的回调方法将被…

JAVA代码优化:Token验证处理

简述&#xff1a; Token验证处理是指在客户端和服务端之间进行身份验证和授权的过程。在这个过程中&#xff0c;客户端通常会提供一个令牌&#xff08;Token&#xff09;&#xff0c;用于证明其合法性和权限。服务端接收到该令牌后&#xff0c;需要对其进行验证&#xff0c;以…

隐写术和人工智能

在一项新的研究中&#xff0c;人工智能对齐研究实验室 Redwood Research 揭示了大型语言模型 (LLM) 可以掌握“编码推理”&#xff0c;这是一种隐写术形式。 这种有趣的现象使得大型语言模型能够以人类读者无法理解的方式巧妙地将中间推理步骤嵌入到生成的文本中。 大型语言…

java版王者荣耀

1.主要功能 键盘W,A,S,D键&#xff1a;控制玩家上下左右移动。按钮一&#xff1a;控制英雄发射一个矩形攻击红方小兵。按钮二&#xff1a;控制英雄发射魅惑技能&#xff0c;伤害小兵并让小兵停止移动。技能三&#xff1a;攻击多个敌人并让小兵停止移动。普攻&#xff1a;对小兵…

C++初阶 | [七] string类(上)

摘要&#xff1a;标准库中的string类的常用函数 C语言中&#xff0c;字符串是以\0结尾的一些字符的集合&#xff0c;为了操作方便&#xff0c;C标准库中提供了一些str系列的库函数&#xff0c; 但是这些库函数与字符串是分离开的&#xff0c;不太符合OOP(面向对象)的思想&#…

03、pytest初体验

官方实例 # content of test_sample.py def func(x):return x 1def test_ansewer():assert func(3) 5步骤解释 [100%]指的是所有测试用例的总体进度&#xff0c;完成后&#xff0c;pytest显示一个失败报告&#xff0c;因为func(3)没有返回5 注意&#xff1a;你可以使用ass…

【滤波第二期】中值滤波的原理和C代码

中值滤波是一种非线性数字滤波技术&#xff0c;主要应用于信号处理和图像处理领域&#xff0c;用于减小信号中的噪声和离群值。中值滤波的核心思想是通过计算一组数据点的中间值&#xff0c;以抑制脉冲噪声等离群值的影响&#xff0c;从而实现信号的平滑处理。 1&#xff0c;中…

PIL、cv2读取类型以及转换,PIL、numpy、tensor格式以及cuda、cpu的格式转换

一、PIL&#xff0c;cv2读取数据图片以及之间的转换 cv2PIL读取acv2.imread()aImage.open()读取类型数组类型PIL类型读取尺寸排列&#xff08;H,W,C&#xff09;&#xff08;W,H,C&#xff09;显示图片cv2.imshow(“a”, a)cv2.waitKey (0)a.show()相互之间转换显示Image.from…