前后端传输文件(图片)

前端: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,处理方式可参照前文

相关推荐
该用户已不存在13 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net
小码编匠17 小时前
WPF 中的高级交互通过右键拖动实现图像灵活缩放
后端·c#·.net
追逐时光者18 小时前
一个基于 .NET 开源、简易、轻量级的进销存管理系统
后端·.net
唐青枫1 天前
C#.NET 定时任务与队列利器:Hangfire 完整教程
c#·.net
hez20101 天前
Runtime Async - 步入高性能异步时代
c#·.net·.net core·clr
追逐时光者2 天前
.NET Fiddle:一个方便易用的在线.NET代码编辑工具
后端·.net
mudtools2 天前
.NET驾驭Word之力:玩转文本与格式
c#·.net
唐青枫2 天前
C#.NET 数据库开发提速秘籍:SqlSugar 实战详解
c#·.net
追逐时光者2 天前
精选 4 款基于 .NET 开源、功能强大的 Windows 系统优化工具
后端·.net
mudtools3 天前
.NET驾驭Word之力:理解Word对象模型核心 (Application, Document, Range)
c#·.net