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

news2024/11/19 11:21:14

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)
  });
}

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

「清新题精讲」CF249D - Donkey and Stars

更好的阅读体验 CF249D - Donkey and Stars Description 给定 n n n 个点 ( x i , y i ) (x_i,y_i) (xi​,yi​) 和 a , b , c , d a,b,c,d a,b,c,d,求出最多有多少个点依次连接而成的折线上线段的斜率在 ( a b , c d ) (\frac{a}{b},\frac{c}{d}) (ba​,dc​…

​代康伟的智慧引领,北汽蓝谷在新能源汽车市场的革新之路

在新能源汽车市场的浪潮中,北汽蓝谷以其独特的场景化造车理念,成为了行业的引领者。2023年,北汽蓝谷的极狐品牌在产品投放上明显加快,推出了多款基于场景化造车理念的新车,如极狐阿尔法S/T森林版和极狐汽车考拉等&…

huggingface的self.state与self.control来源(TrainerState与TrainerControl)

文章目录 前言一、huggingface的trainer的self.state与self.control初始化调用二、TrainerState源码解读(self.state)1、huggingface中self.state初始化参数2、TrainerState类的Demo 三、TrainerControl源码解读(self.control)总结 前言 在 Hugging Face 中,self.s…

力扣:226. 翻转二叉树

226. 翻转二叉树 已解答 简单 相关标签 相关企业 给你一棵二叉树的根节点 root ,翻转这棵二叉树,并返回其根节点。 示例 1: 输入:root [4,2,7,1,3,6,9] 输出:[4,7,2,9,6,3,1]示例 2: 输入&#xff1a…

数组-检查数组内是否存在和为7的倍数的子序列

一、题目描述 二、解题思路 这里首先要分辨清楚是子序列还是子数组 原数组:[1,2,3,4,5] 子序列:元素和元素之间相对位置保持不变,但是在原数组中不一定连续,如:[1,3,4]; 子数组:元素元素之间保…

canfd与can2.0关系

canfd是can2.0的升级版, 支持canfd的设备就支持can2.0,但can2.0的设备不支持canfd 参考 是选CAN接口卡还是CANFD接口卡_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1Hh411K7Zn/?spm_id_from333.999.0.0 哪些STM32有CANFD外设 STM32G0, STM…

一款免费的软件媒体系统软件!!【送源码】

Jellyfin是一个免费的软件媒体系统,让您在管理和流媒体控制您的媒体。它是专有的Emby和Plex的替代品,通过多个应用程序从专用服务器向最终用户设备提供媒体。Jellvfin是Emby的3.5.2版本的后裔,并被移植到.NETCore框架中,以实现完全…

新火种AI|寻求合作伙伴,展开豪赌,推出神秘AI项目...苹果能否突破AI困境?

作者:小岩 编辑:彩云 2024年,伴随着AI技术的多次爆火,不仅各大科技巨头纷纷进入AI赛道展开角力,诸多智能手机厂商也纷纷加紧布局相关技术,推出众多AI手机。作为手机领域的龙头老大,苹果自然是…

基于单片机的步进电机控制系统研究

摘 要 : 近年来 , 步进电机凭借其定位精度高 、 使用方便 、 性价比高 、 容易控制等优点 , 在各领域受到广泛应用 。 文中利用C52 单片机设计了一种步进电机控制系统 , 介绍了其总体方案 、 主控制模块 、 驱动电路 、 键盘 、 晶…

洗地机哪个牌子最好用?十大名牌洗地机排行榜

作为一种新兴的智能家居产品,洗地机的市场规模已经突破了百亿大关。如此庞大的市场自然吸引了大量资本的涌入,许多品牌纷纷推出自己的洗地机产品,试图在这个竞争激烈的市场中占据一席之地。然而,面对如此多的品牌和型号&#xff0…

SelfKG论文翻译

SelfKG: Self-Supervised Entity Alignment in Knowledge Graphs SelfKG:知识图中的自监督实体对齐 ABSTRACT 实体对齐旨在识别不同知识图谱(KG)中的等效实体,是构建网络规模知识图谱的基本问题。在其发展过程中,标…

Java面试题分享-敏感词替换 java 版本

入职啦最近更新了一些后端笔试、面试题目,大家看看能快速实现吗? 关注 入职啦 微信公众号,每日更新有用的知识,Python,Java,Golang,Rust,javascript 等语言都有 不要再用replaceAll做…

Django之文件上传(一)

一、环境搭建 建立项目 django-admin startproject project_demo配置数据库(以MySQL为例) # settings.py DATABASES = {default: {ENGINE: django.db.backends.mysql,NAME: django_file4,USER: root,PASSWORD: 123,HOST: 192.168.31.151,PORT: 3306,} }建立模型 class UploadF…

Vue 3 教程:核心知识

Vue 3 教程:核心知识 1. Vue3简介1.1. 【性能的提升】1.2.【 源码的升级】1.3. 【拥抱TypeScript】1.4. 【新的特性】 2. 创建Vue3工程2.1. 【基于 vue-cli 创建】2.2. 【基于 vite 创建】(推荐)2.3. 【一个简单的效果】 3. Vue3核心语法3.1. 【OptionsAPI 与 Compo…

Codeforces Round 948 (Div. 2) E. Tensor(思维题-交互)

题目 n(3<n<100)个点的有向图&#xff0c; 图的边的关系未知&#xff0c;但保证以下两点&#xff1a; 1. 只存在j->i&#xff08;i<j&#xff09;的边 2. 对于任意三个点i、j、k&#xff08;i<j<k&#xff09;&#xff0c;要么k可以到达i&#xff0c;要么…

基于java实现图片中任意封闭区域识别

需求&#xff1a; 在浏览器中给用户呈现一张图片&#xff0c;用户点击图片中的某些标志物&#xff0c;需要系统给出标志物的信息反馈&#xff0c;达到一个交互的作用。 比如下图中&#xff0c;点击某个封闭区域时候&#xff0c;需要告知用户点击的区域名称及图形形状特性等等。…

Django之rest_framework(九)

一、分页-PageNumberPagination类 REST framework提供了分页的支持 官网:Pagination - Django REST framework 1.1、全局设置 # settings.py REST_FRAMEWORK = {DEFAULT_PAGINATION_CLASS: rest_framework.pagination.PageNumberPagination,PAGE_SIZE: 100 # 每页数目 }提示…

相对论表明速度越快时间越慢,为什么速度会影响时间?

在物理学的宏伟殿堂中&#xff0c;相对论以其深邃的洞察力&#xff0c;挑战了我们对时间和空间的传统认识。1905年&#xff0c;阿尔伯特爱因斯坦提出了狭义相对论&#xff0c;揭示了在所有惯性参照系中&#xff0c;光速是常数的惊人事实。 随后在1915年&#xff0c;他进一步发展…

ABAP 在增强中COMMIT

前言 呃&#xff0c;又是很磨人的需求&#xff0c;正常情况下是不允许在增强中COMMIT的&#xff0c;会影响源程序本身的逻辑&#xff0c;但是这个需求就得这么干… 就是在交货单增强里面要再调用一次交货单BAPI&#xff0c;通过SO的交货单自动创建STO的交货单&#xff0c;如果…

uniapp h5项目切换导航栏及动态渲染按钮颜色

1.效果图 2.html,动态渲染按钮样式---三元判断 <!-- 切换栏 --><view class"statusList"><block v-for"(item,index) in list" :key"index"><view class"swiper-tab-list" :class"current item.id?activ…