当前位置: 首页 > 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 };
http://www.lryc.cn/news/437944.html

相关文章:

  • Leetcode面试经典150题-141.环形链表
  • sh文件执行提示语法错误: 未预期的文件结尾
  • 基于SpringBoot的甜品店管理系统
  • 动态规划-不同的子序列
  • 如何通过OceanBase的多级弹性扩缩容能力应对业务洪峰
  • D - 1D Country(AtCoder Beginner Contest 371)
  • 怎么很多张图片拼接成一张?试试这几种图片拼接方法!
  • Python实现优化的分水岭算法
  • 智慧交通基于yolov8的行人车辆检测计数系统python源码+onnx模型+精美GUI界面
  • Linux开发工具的使用
  • 【devops】devops-git之介绍以及日常使用
  • 012复杂度07leetcode
  • 4.网络编程
  • OpenCV GUI常用函数详解
  • Tuxera NTFS for Mac破解版下载 Tuxera NTFS for Mac2023激活码 mac电脑ntfs磁盘软件
  • oceanbase(ob)基于备份集搭建备租户方式
  • Javase复习day21算法、arrays、Lamdba表达式
  • 移动硬盘无法读取?别慌!这些方法助你恢复数据!
  • Java集合面试(上)
  • Python画笔案例-046 绘制小红伞
  • 使用 .NET 6 构建跨平台 Worker Service 服务:跨越平台的 C# 服务开发——解决Windows服务跨平台问题
  • terminator-gnome
  • 7.测试用例设计方法 + Bug
  • uniapp小程序,使用腾讯地图获取定位
  • Reactive 编程-Project Reactor
  • splice用法
  • Redis - 缓存
  • 基于SpringBoot+Vue的养老院管理系统
  • 多线程爬虫接入代理IP:高效数据抓取的秘诀
  • [网络][CISCO]Cisco-PIX配置详解