Vue3 图片或视频下载跨域或文件损坏的解决方法

Vue3 图片或视频下载跨域或文件损坏的解决方法

  • 修改跨域配置文件
    • 下载方法

修改跨域配置文件

修改vite.config.ts文件proxy里面写跨域地址,如下图,图片地址就是我们要跨域的目标地址:
在这里插入图片描述

下载方法

在这里插入图片描述
如下就是我取消上面那句后的报错
在这里插入图片描述
然后调用两个方法即可:
在这里插入图片描述
在这里插入图片描述

//下载
const downloadCallback = () => {
  const url = mediaItem?.mediaUrl.replace("http://www.aaa(注意这里是需要替换的地址)", "/download")
  downloadFile(url, mediaItem?.name ?? '下载' ) // 调用方法一
  // downloadImg(url)// 调用方法二
}

//方法一
const downloadFile = (fileUrl:string, fileName:string) => {
  fetch(fileUrl).then(res =>
    res.blob().then((blob) => {
      const a = document.createElement('a')
      const url = window.URL.createObjectURL(blob)
      a.href = url
      a.download = fileName
      a.click()
      window.URL.revokeObjectURL(url)
    }),
  )
}

//方法二
const downloadImg = (url:string) => {
  axios({
    url, //URL,根据实际情况来 
    method: "get", responseType: "blob"
  })
  .then((response)=> { 
    console.log('response',response)
    const link = document.createElement("a"); 
    let blob = new Blob([response.data], { type: response.data.type }); 
    let url = URL.createObjectURL(blob); 
    link.href = url; link.download = mediaItem?.name ?? '下载'; 
    link.click(); 
    window.URL.revokeObjectURL(url)
  });
}

记录一下工作中的小问题,自助助人!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

24V_2A_1.2MHZ|PCD0303升压恒频LCD背光源专用电路超小体积封装

概述 PCD0303是一个恒定频率,6针SOT23电流模式升压转换器用于小型低功耗应用。PCD0303 以1.2MHz切换,并且允许使用微小的,低成本电容器和电感器2mm或更小,内部软启动会产生较小的涌入电流延长电池寿命。PCD0303具有自动切换至轻负载下的脉冲…

【美羊羊拿金币问题】

问题: 有一天美羊羊正在草地上玩耍,突然天上开始落金币,这些金币掉落的范围在一个固定的水平区域内,但这些金币一旦掉落到地上就消失了,因此美羊羊只有不断地移动并从空中接住这些金币才能得到它们。假设金币掉落的位…

电脑提示:“找不到vcruntime140_1.dll无法执行”该怎么恢复?一键修复vcruntime140_1.dll丢失

vcruntime140_1.dll是一个关键的系统文件,它在电脑运行过程中被调用。如果该文件丢失或找不到,将会导致弹出"找不到vcruntime140_1.dll无法执行"的错误提示。缺失vcruntime140_1.dll文件将导致软件或游戏无法正常打开或运行。 一键修复vcrunti…

【学习Day1】计算机基础

✍🏻记录学习过程中的输出,坚持每天学习一点点~ ❤️希望能给大家提供帮助~欢迎点赞👍🏻收藏⭐评论✍🏻指点🙏 1.1 中央处理单元CPU 中央处理器(CPU,central processing unit&…

基于SpringBoot+Html+Mysql的餐厅点餐管理系统外卖点餐系统

博主介绍: 大家好,本人精通Java、Python、C#、C、C编程语言,同时也熟练掌握微信小程序、Php和Android等技术,能够为大家提供全方位的技术支持和交流。 我有丰富的成品Java、Python、C#毕设项目经验,能够为学生提供各类…

产品推荐 | 基于Xilinx Zynq-7015 FPGA的MYC-C7Z015核心板

一、产品概述 基于 Xilinx Zynq-7015,双Cortex-A9FPGA全可编程处理器;PS部分(ARM)与PL部分(FPGA)之间采用AXI高速片上总线通信,吉比特级带宽,突破传统ARMFPGA架构的通信瓶颈,通过PL部分(FPGA)灵活配置丰富的外设接口&…

Android ANR Trace日志阅读分析技巧

什么是Trace日志 Trace日志是指ANR目录下的一份txt文件 adb pull /data/anr/traces.txt Trace日志有什么用 分析应用ANR无响应的问题, Trace怎么用 Cmd line: com.xx ABI: arm Build type: optimized Zygote loaded classes3682 post zygote classes3750 Intern…

西湖大学提出AIGC检测框架,精准识别AI撰写的文稿

近年来人工智能技术突飞猛进,尤其是大语言模型的出现,让AI具备了创作文章、小说、剧本等内容的能力。 AI代写,已经逃不过老师、编辑、审稿人的火眼金睛了。但让AI仅改写部分片段,就安全了么? 针对检测AI改写的片段&a…

MSMG Toolkit深度Windows系统镜像文件个性定制!

MSMG Toolkit,这个听起来略显神秘的名字,在DIY电脑爱好者和系统管理员的圈子中却是大名鼎鼎。这是一款免费的系统定制工具,专为Windows操作系统量身定做,旨在帮助用户轻松移除不必要的系统组件、集成更新、添加驱动程序,以及实现无人值守安装等功能,让每一次系统安装都更…

无与伦比的5G连接助力Sunswift Racing太阳能汽车取得成功

一、面临挑战 本案例研究重点关注Sunswift Racing团队的要求,即提供尖端的连接解决方案,以满足2023年普利司通世界挑战赛上车辆地形的特定要求。 德思特Panorama车载天线以即使在最苛刻的条件下也能提供高性能无线连接解决方案而闻名。Sunswift面临的主…

Python 机器学习 基础 之 算法链与管道 【算法链与管道/预处理进行参数选择/构建管道/在网格搜索中使用管道】的简单说明

Python 机器学习 基础 之 算法链与管道 【算法链与管道/预处理进行参数选择/构建管道/在网格搜索中使用管道】的简单说明 目录 Python 机器学习 基础 之 算法链与管道 【算法链与管道/预处理进行参数选择/构建管道/在网格搜索中使用管道】的简单说明 一、简单介绍 二、算法链…

HTML静态网页成品作业(HTML+CSS)——游戏阴阳师介绍网页(4个页面)

🎉不定期分享源码,关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 🏷️本套采用HTMLCSS,未使用Javacsript代码,共有4个页面。 二、作品演示 三、代…

ChatGPT成知名度最高生成式AI产品,使用频率却不高

5月29日,牛津大学、路透社新闻研究所联合发布了一份生成式AI(AIGC)调查报告。 在今年3月28日—4月30日对美国、英国、法国、日本、丹麦和阿根廷的大约12,217人进行了调查,深度调研他们对生成式AI产品的应用情况。 结果显示&…

真实测评:9款电脑加密软件最新排名

2024年已经过半,电脑加密软件市场发生了很多变化,根据资料汇总,一些电脑加密软件排名也发生了变化,下面是最近的排名。 1、安企神: 可以试试7天的免费试用,用过之后就回不去了 试用版https://work.weix…

总负债20.79亿,银行借款在增加,经营所得现金在减少,累计亏损在增加,易点云披露其风险(四)

来源:猛兽财经 作者:猛兽财经 全文共二十五章,总计6万字。 由于篇幅所限,分为(一)到(五)篇发布。 本文为《负债20.79亿,银行借款在增加,经营所得现金在减少,易点云披露风险》&am…

区间预测 | Matlab实现DNN-KDE深度神经网络结合核密度估计多置信区间多变量回归区间预测

区间预测 | Matlab实现DNN-KDE深度神经网络结合核密度估计多置信区间多变量回归区间预测 目录 区间预测 | Matlab实现DNN-KDE深度神经网络结合核密度估计多置信区间多变量回归区间预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现DNN-KDE深度神经网络结合…

Cobaltstrike渗透测试框架

Cobaltstrike简介 cobalt strike(简称CS)是一款团队作战渗透测试神器,分为客户端及服务端,一个服务端可以对应多个客户 端,一个客户端可以连接多个服务端,可被团队进行分布式协团操作. 和MSF关系 metas…

IEnumerable 、 IEnumerator,yield return

自定义迭代类 》》》using System.Collections; using System.Collections; using System.Runtime.CompilerServices;namespace ConsoleApp1 {// 可迭代对象 标记此类可迭代 继承IEnumerable 类是可以迭代public class SpecificEnumerable : IEnumerable{private readonly …

首搭第五代DM技术,秦L DM-i正式上市,仅售9.98万元起

5月28日,比亚迪王朝重磅新车秦L DM-i在西安震撼上市,首搭第五代DM技术,百公里亏电油耗达到划时代的2.9L,“一箱油”满油满电综合续航达2100公里,引领中级,创下了百公里油耗的历史新低,开创油耗2…

第一讲:单片机STC89C52+RA8889驱动控制彩屏(源码公开)

51单片机驱动控制彩屏系列讲座 第一讲:单片机STC89C52RA8889驱动控制彩屏(源码公开) 单片机通过SPI与RA8889进行通信,由于单片机是5V,RA8889是3.3V,故需要进行电平转换,有现成的模组TXS0108E等可以采用。…