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

前端form表单+ifarme方式实现大文件下载


// main.jsimport Vue from 'vue';
import App from './App.vue';
import { downloadTokenFile } from '@/path/to/your/function'; // 替换为您的函数路径// 将 downloadTokenFile 添加到 Vue 原型上
Vue.prototype.$downloadTokenFile = downloadTokenFile;new Vue({el: '#app',render: h => h(App),
});
// ExampleComponent.vueexport default {methods: {async downloadFile() {try {const params = {// 下载时的具体参数id: row.id,};await this.$downloadTokenFile('/api/download-url', params);} catch (error) {console.error(error);}},},
};
/* Ended by AICoder, pid:3998fad1c627467144b30897c0b61912c4b6e505 */
import { getDownloadToken } from '@/api/service';function createHiddenIframe() {const iframe = document.createElement('iframe');iframe.name = 'downLoadframe';iframe.id = 'hiddenIframe';iframe.style.display = 'none';document.body.appendChild(iframe);
}function downloadFile(url, params = {}, authInfo) {if (!document.getElementById('hiddenIframe')) {createHiddenIframe();}const iframe = document.getElementById('hiddenIframe');const form = document.createElement('form');form.method = 'post';form.enctype = 'multipart/form-data';form.style.display = 'none'; // 隐藏表单for (const key in params) {const input = document.createElement('input');input.type = 'hidden';input.name = key;input.value = params[key];form.appendChild(input);}document.body.appendChild(form);form.action = `${url}?uuid=${authInfo.uuid}&value=${authInfo.value}`;form.target = 'downLoadframe';form.submit();iframe.onload = function () {const response = JSON.parse(iframe.contentWindow.document.body.innerText);if (response.code !== 0) {handleFailure(response.message);} else {handleSuccess();}};setTimeout(() => {document.body.removeChild(form);}, 1000); // 等待1秒后移除表单
}async function downloadTokenFile(url, params) {const uuid = new Date().getTime();const { data, code } = await getDownloadToken(uuid);try {if (code === 0) {const downloadParams = {...params, //下载时具体参数 对象格式};const authInfo = {//鉴权信息value: data,uuid,};downloadFile(url, downloadParams, authInfo);} else {handleFailure('获取下载令牌失败');}} catch (error) {console.error(error);handleFailure('下载文件时发生错误');}
}function handleSuccess() {alert('文件下载成功');
}function handleFailure(message) {alert(message);
}export { downloadTokenFile };

相关文章:

前端form表单+ifarme方式实现大文件下载

// main.jsimport Vue from vue; import App from ./App.vue; import { downloadTokenFile } from /path/to/your/function; // 替换为您的函数路径// 将 downloadTokenFile 添加到 Vue 原型上 Vue.prototype.$downloadTokenFile downloadTokenFile;new Vue({el: #app,render:…...

Leetcode面试经典150题-141.环形链表

题目比较简单,重点是理解思想 解法都在代码里,不懂就留言或者私信 /*** Definition for singly-linked list.* class ListNode {* int val;* ListNode next;* ListNode(int x) {* val x;* next null;* }* }*/ public…...

sh文件执行提示语法错误: 未预期的文件结尾

在执行sh文件时总是提示:语法错误: 未预期的文件结尾,尝试删除最后的空格也不对 最后发现在notepad中转换的问题 需要把windows换成unix就行了...

基于SpringBoot的甜品店管理系统

作者:计算机学姐 开发技术:SpringBoot、SSM、Vue、MySQL、JSP、ElementUI等,“文末源码”。 专栏推荐:前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于JavaSpringBootVueMySQL的蛋糕甜品店管理系…...

动态规划-不同的子序列

题目描述 给你两个字符串 s 和 t ,统计并返回在 s 的 子序列 中 t 出现的个数,结果需要对 109 7 取模。 示例: 输入:s "babgbag", t "bag" 输出:5 解释: 如下所示, 有 5 种可以从…...

如何通过OceanBase的多级弹性扩缩容能力应对业务洪峰

每周四晚上的10点,都有近百万的年轻用户进入泡泡玛特的抽盒机小程序,共同参与到抢抽盲盒新品的活动中。瞬间的并发流量激增对抽盒机小程序的系统构成了巨大的挑战,同时也对其数据库的扩容能力也提出了更高的要求。 但泡泡玛特的工程师们一点…...

D - 1D Country(AtCoder Beginner Contest 371)

题目链接: D - 1D Country (atcoder.jp) 题目描述: 数据范围: 输入输出: 题目分析: 典型的l, r 区间问题,即是前缀和问题,但是注意到数据范围, 数据范围1e-9 到 1e9 数据范围,要是从最小到最大直接for循环去模拟的话,时间复杂度…...

怎么很多张图片拼接成一张?试试这几种图片拼接方法!

怎么很多张图片拼接成一张?在繁忙的现代生活中,我们不断地捕捉和累积着各式各样的图像,它们如同记忆的珍珠,串联起生活的每一个瞬间,然而,随图片数量的激增,管理它们成为了一项挑战,…...

Python实现优化的分水岭算法

目录 优化分水岭算法的博客1. 分水岭算法优化概述2. 优化分水岭算法的步骤3. Python实现优化后的分水岭算法4. 实例:优化分水岭算法在图像分割中的应用5. 总结 优化分水岭算法的博客 分水岭算法是一种强大的图像分割方法,特别适用于分离不同的对象和区域…...

智慧交通基于yolov8的行人车辆检测计数系统python源码+onnx模型+精美GUI界面

【算法介绍】 智慧交通中,基于YOLOv8的行人车辆检测计数系统是一项高效、准确的技术解决方案。该系统利用YOLOv8这一先进的目标检测算法,结合深度学习技术,能够实时检测并准确计数道路上的行人和车辆。YOLOv8在保证检测速度的同时&#xff0…...

Linux开发工具的使用

文章目录 vim的使用基本模式介绍光标当前行操作(命令行模式)光标快速定位(命令行模式):插入模式的三种方式(命令行模式):vim基本操作(命令行模式)底行模式的操…...

【devops】devops-git之介绍以及日常使用

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》:python零基础入门学习 《python运维脚本》: python运维脚本实践 《shell》:shell学习 《terraform》持续更新中:terraform_Aws学习零基础入门到最佳实战 《k8…...

012复杂度07leetcode

视频地址:012复杂度07leetcode_哔哩哔哩_bilibili 网站叫做leetcode。那Linux我相信很多同学都听过这个网站,那这个网站干嘛用呢?这个网站是用于练习算法的一个好网站,那我们这个课程在讲解知识点过程中也会不断的去用到这个网站&#xff0c…...

4.网络编程

1、目的 传播交流信息TCP:打电话UDP:发短信 2、通信协议: httpTCP/IP簇:三次握手(aba),四次挥手(abba)https 3、IP与端口 1.IP地址类:InetAddress、InetSocketAddress InetAdd…...

OpenCV GUI常用函数详解

在OpenCV的High_level GUI模组中有很多GUI函数,下面介绍几个常用的函数。 图像显示窗口相关函数 生成图像显示窗口函数nameWindow() nameWindow()函数的原型如下: 函数用以创建一个给定名的图像显示窗口(后面简单叫做图像窗口)…...

Tuxera NTFS for Mac破解版下载 Tuxera NTFS for Mac2023激活码 mac电脑ntfs磁盘软件

Tuxera NTFS for Mac是一款优秀的Mac系统完全读写软件,提供Fat32、NTFS、Exfat、mac os扩展格式的转换,稳定性好,传输速度极快。Tuxera NTFS for Mac功能丰富,能修复NTFS卷、创建NTFS磁盘映像、创建NTFS分区等等。同时软件支持所有…...

oceanbase(ob)基于备份集搭建备租户方式

一、搭建备租户方式(基于备份的方式) 注意事项:要有一个源端OB集群和目标端OB集群。 1、新建主租户(如果原来有主租户可是省略) #创建unit create resource unit ut_2c2g max_cpu2, memory_size2G, max_iops10000,l…...

Javase复习day21算法、arrays、Lamdba表达式

常见算法 查找算法 基本查找 package search;public class BasicSearchDemo1 {public static void main(String[] args) {//基本算法(顺序查找)int[] arr {131,23,57,37,95,48,57,43};System.out.println(basicSearch(arr, 43));}public static boo…...

移动硬盘无法读取?别慌!这些方法助你恢复数据!

在我们的日常工作和生活中,移动硬盘作为重要的数据存储工具,承载着珍贵资料。然而,移动硬盘无法被电脑读取的情况时有发生,令人焦急。别慌,下面为大家详细介绍恢复移动硬盘数据的有效方法。 一、检查硬件连接和驱动问题…...

Java集合面试(上)

Java集合面试(上) 集合概述 Java 集合,也叫作容器,主要是由两大接口派生而来:一个是 Collection接口,主要用于存放单一元素;另一个是 Map 接口,主要用于存放键值对 说说List,Set,Queue&#…...

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作: 1)、切换集群 2)、切换节点 3)、切换到 apparmor 的目录 4)、执行 apparmor 策略模块 5)、修改 pod 文件 6)、…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...