前后端传输文件(图片)

前端:Vue | 后端:.NET(ASP.NET Core)

情况1:前端===>后端

前端: 

1.设置 header 为 multipart/form-data

2.将数据封装为 FormData 类型

const formData = new FormData()
......获取数据并通过append函数添加至formData实例中
formData.append(key, value)

后端:

1.在Controller层设置参数注解[FromForm]

...... Post([FromForm] TheEntity model)
{......
}

2.在实体中通过IFormFile类型的属性接收图片

public List<IFormFile>? Images { get; set; } = new();

 3.在Service层将图片保存在本地(此处仅作示例,以实际方式为准)

var folder = Path.Combine(Directory.GetCurrentDirectory(), "ImagesFolder");
if (!Directory.Exists(folder))
{Directory.CreateDirectory(folder);
}
foreach (var image in model.Images)
{var filePath = Path.Combine(folder, image.FileName);using var stream = new FileStream(filePath, FileMode.Create);await image.CopyToAsync(stream);
}

情况2:后端===>前端

格式1:byte[]

后端:

将图片以byte数组的格式加载至内存(此处仅作示例,以实际方式为准)

if (urls.Any())
{foreach (var url in urls){item.ImageByteList.Add(File.ReadAllBytes(url));item.ImageNameList.Add((Path.GetFileName(url)));}
}

前端:

const blob = this.convertBase64ToBlob(e) // e是图片的byte[]形式
const url = URL.createObjectURL(blob)
const file = new File([blob], "fileName.png", { type: blob.type })convertBase64ToBlob(base64Data) {const mimeType = 'image/png'const byteArray = new Uint8Array(atob(base64Data).split("").map(char => char.charCodeAt(0)))return new Blob([byteArray], { type: mimeType })},

格式2:FileStream

后端:

在Controller层将图片封装为FileStreamResult类型 

FileStream fileStream = new FileStream("imagePath", FileMode.Open, FileAccess.Read);
FileStreamResult result = File(fileStream, "image/png");

前端:

前端接收到的数据类型即为blob,处理方式可参照前文

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

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

相关文章

成都睿明智科技有限公司真实可靠吗?

在这个日新月异的电商时代&#xff0c;抖音作为短视频与直播电商的佼佼者&#xff0c;正以前所未有的速度重塑着消费者的购物习惯。而在这片充满机遇与挑战的蓝海中&#xff0c;成都睿明智科技有限公司以其独到的眼光和专业的服务&#xff0c;成为了众多商家信赖的合作伙伴。今…

《python语言程序设计》2018版第8章19题几何Rectangle2D类(中)-同志们我要起飞了

前言 昨天的原始绘制两个矩形的代码段draw_rec2原始draw_rec2运行结果我们不是上面往右转90.我怎么往左转90不对吗??? ☺️结果利用已建立完的Rectangle2D类来实现Rectangle2D类的代码可以找上集看,今天是锻炼的一天好几个倒立体式解锁了.祝大家愉快 经过昨天晚上的努力我终…

97. UE5 GAS RPG 实现闪电链技能(二)

书接上回&#xff0c;如果没有查看上一篇文章的同学推荐先看上一章&#xff0c;我们接着实现闪电链技能。 在上一章最后&#xff0c;我们实现了闪电链的第一条链&#xff0c;能够正确显示特效&#xff0c;接下来&#xff0c;我们先实现它的音效和一些bug修复。 我们在多端网络里…

cnn突破四(生成卷积核与固定核对比)

cnn突破三中生成四个卷积核&#xff0c;训练6万次&#xff0c;91分&#xff0c;再训练6万次&#xff0c;95分&#xff0c;不是很满意&#xff0c;但又找不到问题点&#xff0c;所以就想了个办法&#xff0c;使用三个固定核&#xff0c;加上三层bpnet神经网络&#xff0c;看看效…

双十一狂欢派对 五款市面上获得好评的好物

一年一度的双十一购物狂欢派对即将到来&#xff0c;这一天不仅是广大消费者的福利日&#xff0c;也是各大品牌展示实力的战场。随着市场的不断发展与消费者需求的多样化&#xff0c;双十一已经不仅仅是降价促销的代名词&#xff0c;更是品质与创新的竞技场。在琳琅满目的商品中…

产品经理产出的原型设计 - 需求文档应该怎么制作?

需求文档&#xff0c;产品经理最终产出的文档&#xff0c;也是产品设计最终的表述形式。本次分享呢&#xff0c;就是介绍如何写好一份需求文档。 所有元件均可复用&#xff0c;可作为管理端原型设计模板&#xff0c;按照实际项目需求进行功能拓展。有需要的话可分享源文件。 …

ChatGPT Canvas:交互式对话编辑器

自两年前 ChatGPT 发布以来&#xff0c;主流 AI 均以对话形式进行交互。传统的对话式界面可以直观看到反馈结果&#xff0c;但在需要深度编辑和协作的项目中就略显局限。为了解决此问题&#xff0c;几个月前 Claude 就发布过 Artifacts 功能&#xff0c;用来拓展原有对话。而现…

django华业社区电子政务管理系统-计算机毕业设计源码33448

目录 摘要 1 绪论 1.1 选题背景与意义 1.2国内外研究现状 1.3论文结构与章节安排 2系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据流程 3.3.2 业务流程 2.3 系统功能分析 2.3.1 功能性分析 2.3.2 非功能性分析 2.4 系统用例分析 2.5本章小结 3 系统总体设…

【Java】Java面试题笔试

[赠送]面试视频指导简历面试题 Java面试笔试题题库华为 java笔试面试题2014.files 就业相关java 面试题 面试题库 视频笔记 java笔试题大集合及答案 java面试书籍源码 java算法大全源码包8张图解 java.docx25个经典的Spring面试问答.docx 25个经典的Spring面试问答.docx 100家大…

【hot100-java】【删除链表的倒数第 N 个结点】

链表篇 思路&#xff1a; 先走一遍记录链表长度 再走到对应的点&#xff0c;然后删除 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int val) { this.val val; }* ListNode…

【LLM】OpenAI o1模型和相关技术

Note OpenAI o1 模型中推理过程的工作原理 1、o1模型引入了reasoning tokens。这些token用于"思考"&#xff0c;帮助模型分解对提示的理解&#xff0c;并考虑生成回应的多种方法。2、在生成推理token后&#xff0c;模型会产生一个可见的完成token作为答案&#xff0…

Redis:zset类型

Redis&#xff1a;zset类型 zset命令ZADDZCARDZCOUNTZRANGEZREVRANGEZRANGEBYSCOREZREVRANGEBYSCOREZPOPMAXBZPOPMAXZPOPMINBZPOPMINZRANKZREVRANKZSCOREZREMZREMRANGEBYRANKZREMRANGEBYSCOREZINCRBY 集合间操作ZINRERSTOREZUNIONSTORE 内部编码ziplistskiplist 在Redis中&…

【AIGC】ChatGPT提示词Prompt助力自媒体内容创作升级

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AIGC | ChatGPT 文章目录 &#x1f4af;前言&#x1f4af;高效仿写专家级文章提示词使用方法 &#x1f4af;CSDN博主账号分析提示词使用方法 &#x1f4af;自媒体爆款文案优化助手提示词使用方法 &#x1f4af;小结 &#x1f4af…

02基础篇:667的大题题型与应对策略

通过本节&#xff0c;你将学习到&#xff1a; 667分析题的考查方向与基本题型667分析题的两种解决策略 667分析题的三大基本题型 首先&#xff0c;通过回顾667科目分析题的真题&#xff08;2021-2024年&#xff09;&#xff0c;我根据题目特点将其归纳为三个主要类别。这样的…

【JavaWeb】javaweb目录结构简介【转】

以上图说明&#xff1a; bbs目录代表一个web应用bbs目录下的html,jsp文件可以直接被浏览器访问WEB-INF目录下的资源是不能直接被浏览器访问的web.xml文件是web程序的主要配置文件所有的classes文件都放在classes目录下jar文件放在lib目录下

Linux Cent7 已安装MySQL5.7.X,再安装MYSQL8.4.2

一、 下载安装 检查Linux系统的glibc版本rpm -qa | grep glibc结果&#xff1a;glibc-common-2.17-260.el7_6.6.x86_64 glibc-2.17-260.el7_6.6.x86_64 glibc-headers-2.17-260.el7_6.6.x86_64 glibc-devel-2.17-260.el7_6.6.x86_64访问MySQL官网&#xff0c;下载对应版本数据…

华为 HCIP-Datacom H12-821 题库 (32)

&#x1f423;博客最下方微信公众号回复题库,领取题库和教学资源 &#x1f424;诚挚欢迎IT交流有兴趣的公众号回复交流群 &#x1f998;公众号会持续更新网络小知识&#x1f63c; 1.当一个运行 MSTP 协议的交换设备端口收到一个配置BPDU 时&#xff0c;会与设备保存的全局配…

CF D. Minimize the Difference

原题链接&#xff1a;Problem - D - Codeforces 题意&#xff1a;给你长度为n的数组&#xff0c;可以无限次的让i位置的数-1&#xff0c;让i1的位置的数1。问最大值-最小值的最小值是多少&#xff1f; 思路&#xff1a;可以观察出&#xff0c;操作的真正意义是让i位置的数减少…

数字乡村智慧乡镇整体规划设计解决方案

1. 数字乡村的重要性 数字乡镇作为乡村振兴战略的一部分&#xff0c;通过信息化手段提高农业农村现代化水平&#xff0c;是建设数字中国的重要内容&#xff0c;对保障扶贫成果、促进乡村治理体系和治理能力现代化具有基础支撑作用。 2. 乡镇政府和农户面临的问题 乡镇政府和…

Linux 之 安装软件、GCC编译器、Linux 操作系统基础

安装软件、GCC编译器、Linux 操作系统基础 学习任务&#xff1a; 安装 Vmware虚拟机、掌握Ubuntu 系统的使用认识 Ubuntu 操作系统的终端和 Shell掌握软件安装、文件系统、掌握磁盘管理与解压缩掌握 VIM 编辑器、Makefile 基本语法熟悉 Linux 常见指令操作 安装好开发软件&…