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