Vue3实现点击按钮下载头像功能

news2024/12/23 15:09:35

要实现的效果

点击头像右上角弹出选项,点击保存图片可以把图片下载保存到本地
在这里插入图片描述

实现方式关键代码

1.第一种,直接创建a标签给头像地址。进行下载

// 创建一个隐藏的 <a> 标签
      const link = document.createElement("a");
      link.href = headPic; // 设置为图片的 URL
      link.download = "avatar.jpg"; // 设置下载文件名
      // 触发下载
      link.click()

2.第二种方式,使用blob

const saveImage = async () => {
      try {
        // 调用封装好的 fileDownload 方法,传入图片的 URL
        const response = await fileDownload({ url: headPic.value });
        const fileName="headpic.jpg";

         // 提取文件名:从 Content-Disposition 头中获取文件名
          // const contentDisposition = response.headers["content-disposition"];
          // let fileName = "downloaded_image.jpg"; // 默认文件名
          // if (contentDisposition) {
          //   const match = contentDisposition.match(/filename="?([^"]+)"?/);
          //   if (match && match[1]) {
          //     fileName = decodeURIComponent(match[1]); // 解码文件名
          //   }
          // }
        // 创建 Blob 并生成下载链接
        const blob = new Blob([response], { type:response.type });
        const link = document.createElement("a");
        link.href = URL.createObjectURL(blob);
        link.download = fileName; // 设置下载的文件名
        link.click(); // 触发下载
        // 释放 URL 对象
        URL.revokeObjectURL(link.href);
        showToast("保存成功")
      } catch (error) {
        showToast("保存失败")
      }
      // // 创建一个隐藏的 <a> 标签
      // const link = document.createElement("a");
      // link.href = headPic; // 设置为图片的 URL
      // link.download = "avatar.jpg"; // 设置下载文件名
      // // 触发下载
      // link.click();
    };

auth.js

//头像下载
export function fileDownload(info) {
  return request({
    url: "portal/filedownload",
    method: "get",
    params: info,
    responseType:"blob"
  });
}

后台代码:

/// <summary>
/// 文件下载
/// </summary>
/// <param name="url">文件地址</param>
/// <returns></returns>
//[AllowAnonymous]
public async Task<IActionResult> FileDownload(string url)
{
    if (string.IsNullOrEmpty(url)) return BadRequest("图片 URL 不能为空");
    using HttpClient client = new HttpClient();
    try
    {
        // 发送 HTTP 请求下载图片
        HttpResponseMessage response = await client.GetAsync(url);
        response.EnsureSuccessStatusCode();
        byte[] imageBytes = await response.Content.ReadAsByteArrayAsync();
        var contentType = response.Content.Headers.ContentType.MediaType;  //获取图片文件的扩展名
        var fileName = System.IO.Path.GetFileName(new Uri(url).AbsolutePath);  //获取文件名
        return File(imageBytes, contentType, fileName);
    }
    catch (Exception ex)
    {
        return StatusCode(500, $"图片下载失败: {ex.Message}");
    }
}

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

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

相关文章

ctfshow-文件包含

web78 <?phpif(isset($_GET[file])){$file $_GET[file];include($file); }else{highlight_file(__FILE__); } 判断是否存在file参数 如果存在 将包含这个参数值 文件 php://filter可以获取指定文件源码。当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执…

中来股份深陷股权冻结

撰稿|多客 来源|贝多财经 近日&#xff0c;苏州中来光伏新材股份有限公司&#xff08;下称“中来股份”&#xff0c;SZ:300393&#xff09;新增一则被执行人信息。其中&#xff0c;立案时间为2024年9月5日&#xff0c;立案法院为江苏省苏州市中级人民法院&#xff0c;执行标的…

dubbo 服务消费原理分析之应用级服务发现

文章目录 前言一、MigrationRuleListener1、迁移状态模型2、Provider 端升级3、Consumer 端升级4、服务消费选址5、MigrationRuleListener.onRefer6、MigrationRuleHandler.doMigrate6、MigrationRuleHandler.refreshInvoker7、MigrationClusterInvoker.migrateToApplicationFi…

多维时序 | Matlab基于SSA-SVR麻雀算法优化支持向量机的数据多变量时间序列预测

多维时序 | Matlab基于SSA-SVR麻雀算法优化支持向量机的数据多变量时间序列预测 目录 多维时序 | Matlab基于SSA-SVR麻雀算法优化支持向量机的数据多变量时间序列预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab基于SSA-SVR麻雀算法优化支持向量机的数据多变…

【绿盟科技盟管家-注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

[答疑]京酱肉丝可以提炼成一个类吗?

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 &#xff08;匿&#xff09; 2024-9-3 15:02 老师&#xff0c;我也经常遇到这样的困惑&#xff0c;领域概念应该提炼到什么层次&#xff0c;像京酱肉丝什么条件下可以定成子类&#x…

百元以下蓝牙耳机性价比之王品牌?四大高能性价比机型推荐

面对市场上琳琅满目的蓝牙耳机品牌和型号&#xff0c;消费者往往难以抉择&#xff0c;特别是当预算限定在百元以下时&#xff0c;找到一款既满足基本功能又具备一定品质的蓝牙耳机变得尤其困难&#xff0c;那么百元以下蓝牙耳机性价比之王品牌&#xff1f;尽管价格是一个重要的…

位运算+前缀和+预处理,CF 1017D - The Wu

目录 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 二、解题报告 1、思路分析 2、复杂度 3、代码详解 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 1017D - The Wu 二、解题报告 1、思路分析 我们注意到 sum(w[])会很大但…

JKTECH柔性振动盘智能柔性上料机

柔性振动盘&#xff1a;重塑自动化上料新纪元 在快速发展的智能制造领域&#xff0c;面对复杂多变的物料需求&#xff0c;传统的上料方式已难以满足高效、精准、灵活的生产要求。柔性振动盘&#xff0c;作为自动化上料技术的革新者&#xff0c;正以其独特的优势&#xff0c;引…

comfyui攻略:故障报错应对指南!

前言 ComfyUI的常见故障和解决&#xff0c;赶紧收藏起来&#xff0c; 在探索ComfyUI的曲折旅途中&#xff0c;最让人心生畏惧的莫过于那漫天的红色方框和层出不穷的报错信息。它们如同不息的风暴&#xff0c;一波未平&#xff0c;一波又起&#xff0c;令无数热忱的初学者在这…

Dart 3.5更新对普通开发者有哪些影响?

哈喽&#xff0c;我是老刘 Flutter 3.24以及Dart 3.5不久前发布了。 突然觉得时间过得好快。六年前刚开始使用Flutter 1.0的场景还在眼前。 之前写了一篇文章盘点Flutter 3.24的新功能对普通开发者有哪些影响。Flutter 3.24 对普通开发者有哪些影响&#xff1f;https://mp.wei…

两个方法,设置Word打开密码!

想要保护word文件中的内容&#xff0c;我们可以给文件设置一个打开密码&#xff0c;这样只有知道密码的人才能够打开查看文件&#xff0c;今天分享两个word文件设置打开密码的方法。 方法一&#xff1a; 打开word文档后&#xff0c;点击【文件】-【信息】-【保护文档】这里有…

推荐让你事半功倍的5款实用软件

​ 今天我要向大家推荐5款超级好用的效率软件&#xff0c;无论是在学习还是办公中都能够极大地提高效率。这些软件可以帮助你解决许多问题&#xff0c;而且每个都是真正的神器。 1. 音乐管理——MusicBee ​ MusicBee是一款功能强大的音乐管理和播放软件&#xff0c;适合音乐…

STM32CubeMx学习笔记——GPIO使用

一、新建工程 1、选择芯片型号 2、配置时钟RCC 选择 HSE(外部高速时钟) 为 Crystal/Ceramic Resonator(晶振/陶瓷谐振器) ​ 3、时钟树配置 在clock Configuration中将HCLK配置为最高频率然后回车 ​ 4、选择调试模式 SYS 设置&#xff0c;选择 Debug 为 Serial Wire …

iOS开发者新技能:将Flutter集成到你的原生应用中

如何在iOS原生项目中嵌入Flutter 一、创建一个新的iOS项目 首先&#xff0c;在 Xcode 中创建一个新的 iOS 项目&#xff0c;选择 Swift 作为开发语言&#xff0c;因为它的语法简洁&#xff0c;易于理解。 二、打包Flutter项目 在将 Flutter 模块集成到 iOS 项目之前&#xf…

Windows conda常用方法

这里写目录标题 conda链接jupyter conda链接jupyter 列出当前所有环境&#xff1a; conda env list 创建新环境&#xff1a; conda create -n your_env_name pythonX.X&#xff08;2.7、3.6、3.8等&#xff09; 激活环境&#xff1a; conda activate your_env_name 链接jupyte…

大模型微调有必要做吗?LoRa还是RAG?

我需要对大模型做微调吗&#xff1f; 想自定义大模型时&#xff0c;选择&#xff1a;微调还是RAG还是ICL&#xff1f; 需要对大模型做微调&#xff1f; 在人工智能的世界里&#xff0c;大型语言模型&#xff08;LLM&#xff09;已经成为了我们探索未知、解决问题的得力助手。…

uniapp业务实现

uni.requset添加异常判断提示,以及加载动画 /*** 该函数用于发送网络请求获取数据* 请求失败时会弹出相应的错误提示* 请求成功时会检查返回的数据是否存在错误&#xff0c;并根据错误代码做出相应处理* 如果数据请求成功且无错误&#xff0c;则将返回的数据赋值给pets变量*/fu…

NVIDIA Triton Inference Server 部署 yolov5

文章目录 一、拉取 tensorrt 、yolov5、tritonserver 镜像二、下载 yolov5-6.2、tensorrtx/yolov5-6.2源码三、pt转wts四、wts转engine五、创建triton推理服务器六、创建客户端进行测试 一、拉取 tensorrt 、yolov5、tritonserver 镜像 docker pull hakuyyf/tensorrtx:trt8.2_…

群晖NAS本地部署Photopea在线图片PS编辑工具

文章目录 前言1. 部署Photopea2. 运行Photopea3. 群晖安装Cpolar4. 配置公网地址5. 公网访问测试6. 固定公网地址 前言 本文主要介绍如何在群晖NAS本地部署Photopea在线图片PS编辑工具&#xff0c;并结合cpolar内网穿透实现公网环境远程访问本地部署的Photopea处理图片. Phot…