前后端传输文件(图片)

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

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

前端:

1.设置 header 为 multipart/form-data

2.将数据封装为 FormData 类型

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

后端:

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

cs 复制代码
...... Post([FromForm] TheEntity model)
{
    ......
}

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

cs 复制代码
public List<IFormFile>? Images { get; set; } = new();

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

cs 复制代码
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数组的格式加载至内存(此处仅作示例,以实际方式为准)

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

前端:

javascript 复制代码
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类型

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

前端:

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

相关推荐
是罐装可乐3 小时前
深入理解 Vue3 Router:三种路由模式的工作原理与实战应用
架构·vue·路由·history·hash·ssr·router
老华带你飞6 小时前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
William Wang~7 小时前
.net 类库生成的DLL源码混淆加密
.net
一个帅气昵称啊16 小时前
Docker命令大全:从基础到高级实战指南
docker·容器·eureka·架构·.net
zhz521419 小时前
Spring Boot + Redis 缓存性能优化实战:从5秒到毫秒级的性能提升
java·spring boot·redis·缓存·vue
Eiceblue20 小时前
使用 C# 设置 Excel 单元格格式
开发语言·后端·c#·.net·excel
喵叔哟1 天前
58.【.NET8 实战--孢子记账--从单体到微服务--转向微服务】--新增功能--图形验证码
微服务·架构·.net
Tiger_shl1 天前
【.Net技术栈梳理】08-控制反转(IoC)与依赖注入(DI)
开发语言·.net·.netcore
Zhen (Evan) Wang1 天前
.NET 6 文件下载
java·前端·.net
周杰伦fans1 天前
.NET 轻量级处理 Excel 文件库 - MiniExce
windows·.net·excel