前后端传输文件（图片）

Mudrock__2024-10-06 12:15

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