前后端传输文件(图片)

前端: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.mzph.cn/bicheng/55615.shtml

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

相关文章

PHP__sleep和__wakeup有什么区别

在PHP中&#xff0c;__sleep 和 __wakeup 是两个魔术方法&#xff08;Magic Methods&#xff09;&#xff0c;它们与对象的序列化和反序列化过程紧密相关。这两个方法允许开发者在对象被序列化&#xff08;存储或传输&#xff09;和反序列化&#xff08;恢复&#xff09;时执行…

电脑失声,一招搞定

早已习惯了Edge浏览器的“大声朗读”功能&#xff0c;今天值班&#xff0c;值班室用的两台电脑只配有耳机&#xff0c;没有音箱&#xff0c;顿时感觉不适。 先找了一个带功放的老音箱&#xff0c;发现少了电箱到功放的音频线。 一顿搜索&#xff0c;在找到音频线的同时&#…

【案例】平面云

教程案例视频&#xff1a;Unity Shader Graph - 云教程 开发平台&#xff1a;Unity 2022 开发工具&#xff1a;Unity ShaderGraph   一、效果展示 二、ShaderGraph 路线图 三、案例分析 核心思路&#xff1a;使用 Noise&#xff08;噪声&#xff09;模拟云层状态   3.1 说明…

Chat登录时出现SSO信息出错的解决方法

目录 1. 问题所示2. 问题所示3. 解决方法 1. 问题所示 此贴主要是总结回顾&#xff0c;对此放置在运维专栏 出现如下问题&#xff0c;很懵&#xff0c;以为是节点挂了还是网址蹦了 一直刷新&#xff0c;登录之后就出现这个问题 2. 问题所示 对于SSO&#xff0c;也就是单点登…

负载均衡--相关面试题(六)

在负载均衡的面试中&#xff0c;可能会遇到一系列涉及概念、原理、实践应用以及技术细节的问题。以下是一些常见的负载均衡面试题及其详细解答&#xff1a; 一、什么是负载均衡&#xff1f; 回答&#xff1a;负载均衡是一种将网络请求或数据传输工作分配给多个服务器或网络资源…

详解JavaScript函数属性、方法和构造函数

函数属性、方法和构造函数 JS中&#xff0c;函数是值&#xff0c;对函数执行typeof运算会返回function&#xff0c;但是函数是JS中特殊的对象&#xff0c;也可以拥有属性和方法。 length属性 函数体里面&#xff0c;arguments.length表示传入函数的实参个数&#xff0c;而函…

2024年优化苹果免签封装APP H5站打包苹果APP 绿标-永不掉千(永久使用)

大家都知道苹果手机做APP签名很贵&#xff0c; 这个程序就是吧您的H5网站 一切网页可以打开的&#xff0c;封装成app 苹果手机上可以直接安装使用 永久可用&#xff01;&#xff01;很简单&#xff0c;可以看视频教程来安装使用&#xff0c; 视频教程&#xff1a; https://ww…

修改Anaconda虚拟环境默认安装路径(Linux系统)

文章目录 修改Anaconda虚拟环境默认安装路径(Linux系统)1.方法一&#xff1a;使用--prefix参数2.方法二&#xff1a;配置conda环境的默认安装位置 修改Anaconda虚拟环境默认安装路径(Linux系统) 1.方法一&#xff1a;使用--prefix参数 在创建虚拟环境时&#xff0c;使用--pre…

macOS编译和运行prometheus2.54

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码)&#xff1a;https://github.com/zq2599/blog_demos 本篇概览 本文详述了在macOS(M2芯片)上编译和运行prometheus2.54版本的过程&#xff0c;以及安装node_exporter和grafana并使用prometheus指标进行展示 本地…

wzoissb的博客网(感谢CSDN支持)

感谢CSDN提供技术支持&#xff01;&#xff01;&#xff01; wzoissb的博客网站&#xff01;&#xff01;&#xff01;今天发布&#xff01;&#xff01;&#xff01; 我的主页 wzoi账号不公布 LUOGU 账号 其余网络账号…

vue3导入本地图片2种实现方法

在<script setup>中使用import语法&#xff1a; <template><img :src"logo" alt"Logo"> </template><script setup> import logo from ./assets/logo.png; </script> 使用Vue的ref来动态地在<script setup>中…

openpnp - 底部相机高级校正的参数设置

文章目录 openpnp - 底部相机高级校正的参数设置概述笔记修改 “Radial Lines Per Calibration Z” 的方法不同 “Radial Lines Per Calibration Z”的校验结果不同 “Radial Lines Per Calibration Z”的设备校验动作的比较总结备注END openpnp - 底部相机高级校正的参数设置 …

根据给定的相机和镜头参数,估算相机的内参。

1. 相机分辨率和传感器尺寸 最高分辨率&#xff1a;6000 4000 像素传感器尺寸&#xff1a;22.3 mm 14.9 mm 2. 计算像素大小 需要计算每个像素对应的实际尺寸&#xff08;mm/pixel&#xff09;&#xff1a; 水平方向像素大小&#xff1a; 垂直方向像素大小&#xff1a; …

JAVA实现大写金额转小写金额

在金融行业中经常需要把大写金额转成小写金额&#xff0c;之前在一次开发中有个类似的需求&#xff0c;翻阅了好多博文&#xff0c;都没找到合适的&#xff0c;故没办法&#xff0c;就花了点时间研究并实现! 实现代码如下: private static final Character ZERO 零;private s…

国外电商系统开发-运维系统批量添加服务器

您可以把您准备的txt文件&#xff0c;安装要求的格式&#xff0c;复制粘贴到里面就可以了。注意格式&#xff01; 如果是“#” 开头的&#xff0c;则表示注释&#xff01;

Linux篇之IO多路复用

文章目录 前言流IO操作IO阻塞多路IO多个流的IO请求处理水平触发边缘触发最后 前言 你好&#xff0c;我是醉墨居士&#xff0c;今天介绍一下Linux中的IO多路复用机制 流 流是一种用于在程序与外部数据源&#xff08;如文件、网络连接、内存等&#xff09;之间传输数据的机制&…

在掌控板中加载人教版信息科技教学指南中的educore库

掌控板中加载educore库 人教信息科技数字资源平台&#xff08;https://ebook.mypep.cn/free&#xff09;中的《信息科技教学指南硬件编程代码说明》文件中提到“本程序说明主要供教学参考。需要可编程主控板须支持运行MicroPython 脚本程序。希望有更多的主控板在固件中支持ed…

AppointmentController

目录 1、 AppointmentController 1.1、 保存主页面信息 1.1.1、 //预约表 1.1.2、 维修明细表 1.1.3、 //配件明细表 1.1.4、 1.1.5、 //从某集合中删除其与另一个集合中相同的项&#xff1b;其实这个说简单点就是某集合中独有的元素(差集) 1.1.6、 //删除 1…

(JAVA)浅尝关于 “栈” 数据结构

1. 栈的概述&#xff1a; 1.1 生活中的栈 存储货物或供旅客住宿的地方&#xff0c;可引申为仓库、中转站。例如酒店&#xff0c;在古时候叫客栈&#xff0c;是供旅客休息的地方&#xff0c;旅客可以进客栈休息&#xff0c;休息完毕后就离开客栈 1.2计算机中的栈 将生活中的…

设计模式(3)builder

需求&#xff1a; 对于复杂的对象&#xff0c;我们只需要 通过 设置一些参数&#xff0c;就可以得到相对应的 实例。 简单来说&#xff0c; 需求就是用一个类 通过方法返回一个 新建的对象&#xff0c;而且可以通过方法去设置这个对象 public interface CarBuilder {void se…