当前位置: 首页 > news >正文

vue base64图片转file流 下载到本地 或者上传

<img  :src="'data:image/png;base64,'+form.img" style="max-width:280px;max-height: 280px;margin: auto;" />

// base64 转file
const base64ToFile=()=>{let byImg= atob(form.img); // 解码base64let n = byImg.lengthlet a = new Uint8Array(n);while (n--) {a[n] = byImg.charCodeAt(n);}const options = {type: 'image/png',endings: 'native',}let nameImg = '图片名称';return new File([a], nameImg+'.png', options);
}
//上传图片
const confirmImg =()=>{let nameImg = '图片名称';const imgFile = base64ToFile();let formData = new FormData();formData.append("file_name", imgFile);formData.append('type',3);formData.append('mark_name',nameImg+'.png');formData.append('name',nameImg);formData.append('tag',tag);//省略提交return true;});
}// 下载到本地
const downloadImg=()=>{const imgFile = base64ToFile();let nameImg = '图片名称';let imgDown= document.createElement('a');imgDown.download = nameImg;imgDown.href = URL.createObjectURL(imgFile);imgDown.click();
}

相关文章:

vue base64图片转file流 下载到本地 或者上传

<img :src"data:image/png;base64,form.img" style"max-width:280px;max-height: 280px;margin: auto;" />// base64 转file const base64ToFile()>{let byImg atob(form.img); // 解码base64let n byImg.lengthlet a new Uint8Array(n);while…...

无涯教程-PHP - 简介

PHP 7是最期待的&#xff0c;它是PHP编程语言的主要功能版本。 PHP 7于2015年12月3日发布。本教程将以简单直观的方式教您PHP 7的新功能及其用法。 无涯教程假设您已经了解旧版本的PHP&#xff0c;现在就可以开始学习PHP 7的新功能。 使用下面的示例- <html><head&…...

web基础+HTTP协议+httpd详细配置

目目录录 一、Web基础1.1 HTML概述1.1.1 HTML的文件结构1.1.2 HTML中的部分基本标签 1.3 MIME1.4 URI 和 URL1.4 定义1.4.2 URI 和 URL 的区别 二、静态资源和动态资源2.1 静态资源2.2 动态资源 三、HTTP协议3.1 HTTP协议简介3.2 HTTP协议版本3.2 HTTP方法3.3 HTTP请求访问的完…...

【sql】MongoDB的增删改查分页条件等

【sql】MongoDB的增删改查分页条件等 //增 //新增数据2种方式 db.msg.save({"name":"springboot&#x1f600;"}); db.msg.insert({"name":"mango good"}); db.msg.save({"name":"springboot",type:"工具书&…...

我的动态归纳(便于搜索)

linux dns配置文件是“/etc/resolv.conf”&#xff0c;该配置文件用于配置DNS客户&#xff0c;它包含了主机的域名搜索顺序和DNS/服务器的地址&#xff0c;每一行包括一个关键字和一个或多个空格隔开的参数。 /etc/resolv.conf &#xff08;不配置就不能域名解析&#xff09; 可…...

langchain ChatGPT AI私有知识库

企业知识库 原理就是把文档变为向量数据库&#xff0c;然后搜索向量数据库&#xff0c;把相似的数据和问题作为prompt&#xff0c; 输入到大模型&#xff0c;再利用GPT强大的自然语言处理、推理和分析等方面的能力将答案返回给用户 什么是langchain? langchain是一个强大的…...

API接口常用数据格式Json,Json的定义和XML的区别

现在程序员还有谁不知道 JSON 吗&#xff1f;无论对于前端还是后端&#xff0c;JSON 都是一种常见的数据格式。那么 JSON 到底是什么呢&#xff1f; JSON 的定义 JSON &#xff08;JavaScript Object Notation&#xff09; &#xff0c;是一种轻量级的数据交换格式。它的使用…...

密码学学习笔记(二十一):SHA-256与HMAC、NMAC、KMAC

SHA-256 SHA-2是广泛应用的哈希函数&#xff0c;并且有不同的版本&#xff0c;这篇博客主要介绍SHA-256。 SHA-256算法满足了哈希函数的三个安全属性&#xff1a; 抗第一原像性 - 无法根据哈希函数的输出恢复其对应的输入。抗第二原像性 - 给定一个输入和它的哈希值&#xf…...

操作系统-笔记-第四章-文件管理

目录 四、第四章——文件管理 1、文件管理——基础概念 &#xff08;1&#xff09;文件结构 &#xff08;2&#xff09;操作系统提供的接口 &#xff08;3&#xff09;总结 2、文件的逻辑结构 &#xff08;1&#xff09;有结构文件&#xff08;类似SQL表文件&#xff09…...

【MiniGUI】文字颜色实现透明度变化

在MiniGUi中&#xff0c;输出文字时有时候希望文字带有透明度信息&#xff0c; 即文字能够透出下面的图像来。 很自然地想到&#xff0c;设置颜色时&#xff0c;将颜色设置为带有透明度的颜色&#xff1a; SelectFont(hdc, mg_font);SetTextColor(hdc, RGBA2Pixel(HDC_SCREEN, …...

css中元素加定位之后到一定距离元素会变小

css中元素加定位之后到一定距离元素会变小 主要原因&#xff1a;元素没有加宽高 .swiperWrapper .active{bottom: 380px;left: 215px;z-index: 10; } .swiperWrapper .next{bottom: 170px;left: 7%;z-index: 20; } .swiperWrapper .prev{bottom: 360px;left: 0%;z-index: 30;…...

Java 语言实现冒泡排序

Java 语言实现冒泡排序 介绍 冒泡排序是一种简单直观的排序算法&#xff0c;它重复地比较相邻的两个元素&#xff0c;如果顺序错误就交换它们&#xff0c;直到没有需要交换的元素为止。冒泡排序的思路是通过每一轮的比较将最大&#xff08;或最小&#xff09;的元素逐渐“冒泡…...

面向对象单选题

下列选项中不属于面向对象的特征的是&#xff08;B&#xff09; A、封装性 B、安全性 C、继承性 D、多态性 在Java中,关于继承&#xff0c;类只支持&#xff08;A&#xff09; A、单继承 B、多继承 C、两个都可以 D、两个都不可以 用于定义成员的访问控制权的一组关键字…...

微服务-Fegin

在之前我们两服务之间调用的时候用的是restTemplate,但是这个方式调用存在很多的问题 String url "http://userservice/user/" order.getUserId(); 代码可读性差&#xff0c;编码体验不统一参数复杂的url难以维护 所以我们大力推出我们今天的主角--Fegin Feign是…...

[oneAPI] 使用字符级 RNN 生成名称

[oneAPI] 使用字符级 RNN 生成名称 oneAPI特殊写法使用字符级 RNN 生成名称Intel Optimization for PyTorch数据下载加载数据并对数据进行处理创建网络训练过程准备训练训练网络 结果 参考资料 比赛&#xff1a;https://marketing.csdn.net/p/f3e44fbfe46c465f4d9d6c23e38e0517…...

【ROS】参数服务器--理论模型与参数操作(C++)

一、概念介绍 参数服务器在ROS中主要用于实现不同节点之间的数据共享。参数服务器相当于是独立于所有节点的一个公共容器&#xff0c;可以将数据存储在该容器中&#xff0c;被不同的节点调用&#xff0c;当然不同的节点也可以往其中存储数据。 作用&#xff1a;存储一些多节点…...

[oneAPI] 基于BERT预训练模型的英文文本蕴含任务

[oneAPI] 基于BERT预训练模型的英文文本蕴含任务 Intel DevCloud for oneAPI 和 Intel Optimization for PyTorch基于BERT预训练模型的英文文本蕴含任务语料介绍数据集构建 模型训练 结果参考资料 比赛&#xff1a;https://marketing.csdn.net/p/f3e44fbfe46c465f4d9d6c23e38e0…...

【洛谷】P1163 银行贷款

原题链接&#xff1a;https://www.luogu.com.cn/problem/P1163 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 这题需要注意的是利率按月累计这句话&#xff0c;也就是相当于“利滚利”。 我们定义sum变量表示贷款原值&#xff0c;money表示每月支付…...

Java版工程行业管理系统源码-专业的工程管理软件-提供一站式服务 em

​ 鸿鹄工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离构建工程项目管理系统 1. 项目背景 一、随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性&#xff0c;公司对内部工…...

kafka--技术文档--基本docker中安装<单机>-linux

安装zookeeper 阿丹小科普&#xff1a; Kafka在0.11.0.0版本之后不再依赖Zookeeper&#xff0c;而是使用基于Raft协议的Kafka自身的仲裁机制来替代Zookeeper。具体来说&#xff0c;Kafka 2.8.0版本是第一个不需要Zookeeper就可以运行Kafka的版本&#xff0c;这被称为Kafka Raf…...

Wan2.1-umt5辅助数学公式处理:从图片或LaTeX中理解与转换数学表达式

Wan2.1-umt5辅助数学公式处理&#xff1a;从图片或LaTeX中理解与转换数学表达式 如果你在科研、教育或者出版行业工作过&#xff0c;一定遇到过这样的烦恼&#xff1a;看到一篇论文里的复杂公式&#xff0c;想把它录入到自己的文档里&#xff0c;只能一个字一个字地对着敲&…...

5分钟掌握League Akari:英雄联盟玩家的智能助手终极指南

5分钟掌握League Akari&#xff1a;英雄联盟玩家的智能助手终极指南 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League Akari…...

【声音克隆】Qwen3-TTS-12Hz-1.7B-Base优化技巧:如何生成更自然、更逼真的语音

【声音克隆】Qwen3-TTS-12Hz-1.7B-Base优化技巧&#xff1a;如何生成更自然、更逼真的语音 1. 理解Qwen3-TTS的核心能力 1.1 多语言与方言支持 Qwen3-TTS-12Hz-1.7B-Base模型支持10种主要语言和多种方言风格&#xff0c;包括中文、英文、日文等。这种广泛的语言覆盖能力使其…...

Keil5主题配色进阶:不只是好看,更要好用!详解如何区分函数、变量、宏定义的颜色

Keil5主题配色进阶&#xff1a;不只是好看&#xff0c;更要好用&#xff01;详解如何区分函数、变量、宏定义的颜色 作为一名嵌入式开发者&#xff0c;每天面对Keil5的默认编辑器界面&#xff0c;你是否也感到视觉疲劳&#xff1f;那些单调的配色不仅影响编码心情&#xff0c;更…...

别再只用Canvas了!用Vue3组合式API优雅封装fabric.js的画笔与橡皮擦(附完整Hook代码)

重构Canvas交互&#xff1a;用Vue3组合式API封装fabric.js的工程化实践 在Web图形编辑领域&#xff0c;fabric.js以其强大的对象模型和交互能力成为许多开发者的首选。但当我们将它集成到Vue3项目中时&#xff0c;常常会遇到状态管理混乱、代码耦合度高的问题。本文将展示如何用…...

MySQL局域网远程连接测试教程

MySQL局域网远程连接测试教程1本地服务器安装MySQL服务器&#xff0c;安装MySQL shell, Workbench(非必须)防火墙配置2远程访问用户电脑配置IP配置安装 Workbench客户端1本地服务器 安装MySQL服务器&#xff0c;安装MySQL shell, Workbench(非必须) 点击右下角的Advanced Opt…...

Blazor组件测试工具:BootstrapBlazor测试库完整指南

Blazor组件测试工具&#xff1a;BootstrapBlazor测试库完整指南 【免费下载链接】BootstrapBlazor 项目地址: https://gitcode.com/gh_mirrors/bo/BootstrapBlazor BootstrapBlazor测试库是企业级Blazor UI组件库的质量保障体系&#xff0c;提供了一套完整的组件测试解…...

资源占用优化:OpenClaw在RTX4090D上并发控制策略

资源占用优化&#xff1a;OpenClaw在RTX4090D上并发控制策略 1. 为什么需要关注OpenClaw的资源占用&#xff1f; 去年冬天&#xff0c;当我第一次在RTX4090D上部署OpenClaw对接Qwen3-32B模型时&#xff0c;系统频繁崩溃的场景至今记忆犹新。原本以为24GB显存足以应对常规任务…...

FlatBuffers游戏开发终极指南:如何实现零解析实时数据传输

FlatBuffers游戏开发终极指南&#xff1a;如何实现零解析实时数据传输 【免费下载链接】flatbuffers FlatBuffers: Memory Efficient Serialization Library 项目地址: https://gitcode.com/gh_mirrors/flat/flatbuffers 在游戏开发中&#xff0c;数据传输的效率直接影响…...

7天打造智能助理:OpenClaw+Qwen3-VL:30B飞书开发周计划

7天打造智能助理&#xff1a;OpenClawQwen3-VL:30B飞书开发周计划 1. 为什么选择这个组合&#xff1f; 去年冬天&#xff0c;我偶然在GitHub上发现了OpenClaw这个项目。当时我正在为团队寻找一个既能处理日常办公自动化&#xff0c;又能理解图片内容的智能助手方案。传统的RP…...