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

大文件切片上传

  1. 创建组件:创建一个组件用于处理文件上传,命名为Upload.vue
    <template><div><input type="file" @change="handleFileChange" /><button @click="startUpload">开始上传</button></div>
    </template><script setup lang="ts">
    import { ref } from 'vue';
    import { ElMessage } from 'element-plus';const file = ref<File | null>(null);const handleFileChange = (event: Event) => {const target = event.target as HTMLInputElement;if (target.files?.length) {file.value = target.files[0];}
    };const startUpload = () => {if (!file.value) {ElMessage.error('请选择文件');return;}// 在这里编写文件切片上传逻辑
    };
    </script>
    
  2. 添加切片逻辑:在startUpload方法中,我们需要将选择的文件切成多个小块进行上传。可以使用FileReader进行文件切片操作。
const startUpload = () => {if (!file.value) {ElMessage.error('请选择文件');return;}const chunkSize = 1024 * 1024; // 每个切片大小,这里设置为1MBconst totalChunks = Math.ceil(file.value.size / chunkSize); // 总切片数for (let i = 0; i < totalChunks; i++) {const start = i * chunkSize;const end = Math.min(start + chunkSize, file.value.size);const chunk = file.value.slice(start, end);// 在这里将切片上传到服务器}
};

3.切片上传到服务器:可以使用axios库进行文件上传操作。

import axios from 'axios';const startUpload = async () => {if (!file.value) {ElMessage.error('请选择文件');return;}const chunkSize = 1024 * 1024; // 每个切片大小,这里设置为1MBconst totalChunks = Math.ceil(file.value.size / chunkSize); // 总切片数for (let i = 0; i < totalChunks; i++) {const start = i * chunkSize;const end = Math.min(start + chunkSize, file.value.size);const chunk = file.value.slice(start, end);const formData = new FormData();formData.append('chunk', chunk);try {await axios.post('/upload', formData);// 上传成功的处理逻辑} catch (error) {// 上传失败的处理逻辑}}
};

4.添加进度条:可以使用Element Plus的ElProgress组件显示上传进度。

<template><div><input type="file" @change="handleFileChange" /><el-progress v-if="progressVisible" :percentage="uploadPercentage" /><button @click="startUpload">开始上传</button></div>
</template><script setup lang="ts">
import { ref, reactive } from 'vue';
import axios from 'axios';
import { ElMessage, ElProgress } from 'element-plus';const file = ref<File | null>(null);
const progress = reactive({visible: false,percentage: 0,
});const handleFileChange = (event: Event) => {const target = event.target as HTMLInputElement;if (target.files?.length) {file.value = target.files[0];}
};const startUpload = async () => {if (!file.value) {ElMessage.error('请选择文件');return;}const chunkSize = 1024 * 1024; // 每个切片大小,这里设置为1MBconst totalChunks = Math.ceil(file.value.size / chunkSize); // 总切片数progress.visible = true;progress.percentage = 0;for (let i = 0; i < totalChunks; i++) {const start = i * chunkSize;const end = Math.min(start + chunkSize, file.value.size);const chunk = file.value.slice(start, end);const formData = new FormData();formData.append('chunk', chunk);try {await axios.post('/upload', formData, {onUploadProgress: (progressEvent: ProgressEvent) => {const percentage = Math.round((progressEvent.loaded / progressEvent.total) * 100);progress.percentage = percentage;},});// 上传成功的处理逻辑} catch (error) {// 上传失败的处理逻辑}}progress.visible = false;
};
</script>

相关文章:

大文件切片上传

创建组件&#xff1a;创建一个组件用于处理文件上传&#xff0c;命名为Upload.vue。 <template><div><input type"file" change"handleFileChange" /><button click"startUpload">开始上传</button></div> …...

ubuntu切换python版本

在没有安装类似anoconda的管理工具的时候&#xff0c;我们常常会被Ubuntu下的Python版本切换问题所头疼。 可以使用update-alternatives工具进行python版本的任意切换 当使用update-alternatives工具来切换Ubuntu系统上的Python版本时&#xff0c;您实际上是在系统范围内选择…...

docker 安装 elasticsearch、kibana 7.4.2

切换root 用户 su root 拉起镜像 docker pull elasticsearch:7.4.2 docker pull kibana:7.4.2 #1、创建Elasticsearch配置文件夹 mkdir -p /mydata/elasticsearch/config ​ #2、创建Elasticsearch数据文件夹 mkdir -p /mydata/elasticsearch/data #3、创建Elasticsearch插件…...

【es6】函数参数设置默认值

1、es6之前的函数参数默认值写法 1.1、使用短路或||的写法 当y为空时&#xff0c;y判断为false &#xff0c;走||右边的&#xff0c;所以y world;当y不为空时&#xff0c;y判断为true&#xff0c;不需要再运行||右边的&#xff0c;所以 y y function log(x, y) {y y || W…...

Pytest和Unittest测试框架的区别?

如何区分这两者&#xff0c;很简单unittest作为官方的测试框架&#xff0c;在测试方面更加基础&#xff0c;并且可以再次基础上进行二次开发&#xff0c;同时在用法上格式会更加复杂&#xff1b;而pytest框架作为第三方框架&#xff0c;方便的地方就在于使用更加灵活&#xff0…...

C#基础知识(一)

一、C#程序结构 《1》命名空间的声明&#xff08;namespace declaration&#xff09; 《2》一个class 《3》class方法 《4》class属性 《5》一个main方法 《6》语句&#xff08;statements&#xff09;&表达式&#xff08;Expressions&#xff09; 《7》注释 注&#xff1a…...

我还不知道?Android组件化插件化模块化

Android组件化、插件化和模块化是针对Android应用程序开发的一种架构设计思想和开发方式。 组件化&#xff08;Componentization&#xff09;&#xff1a; 组件化是将一个大型的Android应用程序拆分成多个独立的组件&#xff08;Module&#xff09;&#xff0c;每个组件可以独…...

借助 AI 工具,真的能成为 10x 工程师?

或许你听说过 10x 工程师吗&#xff1f; 如果你问猎头公司 10x 工程师是什么意思&#xff0c;他们可能会说 “生产力”&#xff01;10x 是指完成任务比别人快 10 倍的工程师。 2019 年&#xff0c;Twitter 上就曾经对 10 x 工程师这一议题有过一次空前热烈的讨论&#xff0c;引…...

TypeScript 面向对象

TypeScript 接口 TypeScript 接口定义如下&#xff1a; interface interface_name { } 以下实例中&#xff0c;我们定义了一个接口 IPerson&#xff0c;接着定义了一个变量 customer&#xff0c;它的类型是 IPerson。 customer 实现了接口 IPerson 的属性和方法。 interf…...

k8s 中快速启动curl pod 做api test

场景 k8s上运行的pod需要进行api测试,由于开发使用的镜像都是最小化构建,不能保证现有的pod中一定有curl工具,于是需要启动一个带有curl工具的测试pod专门进行api测试 指令 kubectl run curl-test-pod --imagecurlimages/curl -n {namespace} -i --tty -- sh上述指令实现在指…...

神经网络基础-神经网络补充概念-56-迁移学习

迁移学习&#xff08;Transfer Learning&#xff09;是一种机器学习技术&#xff0c;旨在将在一个任务上学到的知识或模型迁移到另一个相关任务上&#xff0c;以提高新任务的性能。迁移学习的核心思想是通过利用源领域&#xff08;source domain&#xff09;的知识来改善目标领…...

力扣:65. 有效数字(Python3)

题目&#xff1a; 有效数字&#xff08;按顺序&#xff09;可以分成以下几个部分&#xff1a; 一个 小数 或者 整数&#xff08;可选&#xff09;一个 e 或 E &#xff0c;后面跟着一个 整数 小数&#xff08;按顺序&#xff09;可以分成以下几个部分&#xff1a; &#xff08;…...

003-Spring boot 启动流程分析

目录 启动流程分析创建 SpringApplication启动 run(String... args) 读取配置流程分析listeners.environmentPrepared解析配置文件详细分析EnvironmentPostProcessor 详细分析 启动流程分析 SpringApplication.run(App.class, args);return new SpringApplication(primarySour…...

中间件的介绍

1.1 什么是中间件 中间件是介于应用系统和系统软件之间的一类软件&#xff0c;他使用系统软件所提供的基础服务&#xff0c;衔接网络上应用系统的各个部分或不同的应用&#xff0c;能够达到资源共享、功能共享的目的。 例如MySQL就可以看作是具备中间件特性的一种技术&#x…...

LVS-DR模式下(RS检测)ldirectord工具实现部分节点掉点后将请求发往正常设备进行处理

基于前文的LVS-DR集群构建环境 一.下载ldirectord软件 二.将模板文件中的LVS-DR模式相关文件拷贝到/etc/ha.d主配置目录并按实际设备修改 三.配置两台RS匹配规则 四.停止RS1的http服务进行测试 RS1失去工作能力&#xff0c;RS2接替RS1 基于前文的LVS-DR集群构建环境 一.下…...

c++游戏制作指南(四):c++实现数据的存储和读取(输入流fstream)

&#x1f37f;*★,*:.☆(&#xffe3;▽&#xffe3;)/$:*.★* &#x1f37f; &#x1f35f;欢迎来到静渊隐者的csdn博文&#xff0c;本文是c游戏制作指南的一部&#x1f35f; &#x1f355;更多文章请点击下方链接&#x1f355; &#x1f368; c游戏制作指南&#x1f3…...

如何使用CSS实现一个响应式视频播放器?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 使用CSS实现响应式视频播放器⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为那些对Web开发感兴趣…...

Typora上传文件到Gitee

工作内容,不对外开放 一、Typora上传笔记到CSDN 一、安装node.js 官网链接:Node.js (nodejs.org) 下载后得到一个.msi文件,双击即可。 win + R 打开CMD,基于node -v 和npm -v,验证是否安装成功: 二、配置Gitee 1、新建仓库 2、开源此仓库 2.1、初始化readme文件...

系统架构设计师---2017年下午试题1分析与解答(试题三)

2017年下午试题1分析与解答 试题三 阅读以下关于机器人操作系统架构的描述,回答问题1至问题3 【说明】 随着人工智能技术的发展,工业机器人已成为当前工业界的热点研究对象。某宇航设备公司为了扩大业务范围,决策层研究决定准备开展工业机器人研制新业务。公司将论证工作…...

从零搭建vue + element-plus 项目

目录 从零搭建vue element-plus 项目 环境安装 安装项目 安装命令如下&#xff1a; 选择配置如下&#xff1a; 安装插件与启动服务 安装element框架 使用element框架 测试element是否安装成功 环境判断 安装插件 使用插件 配置变量 暴漏变量 测试…...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

Python Einops库:深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

Python爬虫实战:研究Restkit库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的有价值数据。如何高效地采集这些数据并将其应用于实际业务中,成为了许多企业和开发者关注的焦点。网络爬虫技术作为一种自动化的数据采集工具,可以帮助我们从网页中提取所需的信息。而 RESTful API …...