当前位置: 首页 > 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&#…...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽,大家好,我是左手python! Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库,用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接:3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯,要想要能够将所有的电脑解锁&#x…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件(System Property Definition File),用于声明和管理 Bluetooth 模块相…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...

AI,如何重构理解、匹配与决策?

AI 时代,我们如何理解消费? 作者|王彬 封面|Unplash 人们通过信息理解世界。 曾几何时,PC 与移动互联网重塑了人们的购物路径:信息变得唾手可得,商品决策变得高度依赖内容。 但 AI 时代的来…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南:从入门到实战 一、Grunt 是什么? Grunt是一个基于 Node.js 的前端自动化任务运行器,主要用于自动化执行项目开发中重复性高的任务,例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...