圖片上傳是很常見的功能，裏面有些固定的操作也可以沉澱下來。
本文記錄使用Abp vNext做圖片上傳的姿勢。
本文的技術核心與Abp無關，Abp只是手段！
目標
- 上傳圖片----->預覽圖片----->確定保存
- 支持集羣部署
![]()
實現思路：
① 上傳圖片要使用WebAPI特定媒體類型：multipart/form-data;
② 因爲要做圖片預覽，故在上傳時利用AbpCache做一個臨時緩存，返回圖片Id；
③ 前端利用FileReader渲染預覽圖；
④ [確定]: 發起持久化WebAPI（利用第②步返回的圖片Id）
爲什麼強調支持集羣部署？
就這個功能而言，[上傳預覽]和[確定保存]是兩次Http WebAPI請求。
如果服務端使用的是Redis等進程外緩存: 那這正好是一個Stateless應用功能，集羣環境次功能無懼！
如果服務端使用的是進程內緩存:在集羣環境，前後兩次請求有可能打到不同的App服務，後置的[確定保存]WebAPI因此可能報錯， 此處需要做 [會話親和性] Session affinity
實踐
利用Abp做圖片上傳
IFormFile能力如下紅框：
下面將圖片二進制流轉化爲 base64字符串，注入Abp緩存組件IDistributedCache<string>；
緩存圖片字符串1小時。
[上傳預覽], [確定保存]的API完整代碼如下：
/// <summary>
/// 上傳預覽， 返回待上傳的圖片id，Content-Type：multipart/form-data
/// </summary>
/// <returns></returns>
[Consumes("multipart/form-data")]
[Route("upload/preview")]
[ProducesResponseType(typeof(Guid),200)]
[HttpPost]
public async Task<Guid> UploadPicPreviewAsync(IFormFile uploadedFile)
{
var formFileName = uploadedFile.FileName;
if (!new[] { ".png", ".jpg", ".bmp" }.Any((item) => formFileName.EndsWith(item)))
{
throw new AbpValidationException("您上傳的文件格式必須爲png、jpg、bmp中的一種");
}
byte[] bytes;
using (var bodyStream = uploadedFile.OpenReadStream())
{
using (var m = new MemoryStream())
{
await bodyStream.CopyToAsync(m);
bytes = m.ToArray();
}
}
string base64 = Convert.ToBase64String(bytes);
var bgId = Guid.NewGuid();
_cache.Set($"{CurrentUser.TenantId}:bg:{bgId}", base64, new DistributedCacheEntryOptions { SlidingExpiration = new TimeSpan(1, 0, 0) });
return bgId;
}
/// <summary>
/// 保存圖片，要使用到前置API的預覽圖片id
/// </summary>
/// <param name="createPictureInput"></param>
/// <returns></returns>
[Route("upload/")]
[HttpPost]
public async Task<bool> UploadPicAsync([FromBody] CreatePictureInput createPictureInput)
{
var based64 = await _cache.GetAsync($"{CurrentUser.TenantId}:bg:{createPictureInput.PreviewPicId}");
if (string.IsNullOrEmpty(based64))
throw new AbpException("Cache Hotmap Picture do not find");
var model = ObjectMapper.Map<CreatePictureInput, Picture>(createPictureInput);
model.ProfileId = CurrentUser.TenantId;
model.BlobStorage = Convert.FromBase64String(based64);
return await _pictures.InsertAsync(model)!= null;
}
Default implementation of the IDistributedCache interface is the MemoryDistributedCache which works in-memory.
The Distributed Memory Cache (AddDistributedMemoryCache) is a framework-provided implementation of IDistributedCache that stores items in memory. The Distributed Memory Cache isn't an actual distributed cache. Cached items are stored by the app instance on the server where the app is running.
以上兩段文字來自 Abp和Asp.NETCore官方文檔：
- Abp默認的IDistributedCache實現是分佈式內存緩存；
- ASP.NETCore 分佈式內存緩存是框架內置的，是一個假的分佈式緩存,實際是單純的內存緩存。
在沒有使用真實分佈式緩存的情況下， 需要對前後兩個API配置會話親和性。
會話親和性
下面從nginx、Azure、k8s ingress 三角度配置[會話親和性]，(全站生效)
會話親和性的實現原理，是在接受客戶端首次請求時響應某個cookie，服務器會認定使用同一個cookie的請求爲一個會話。
1. nginx
屬於nginx負載均衡的範疇：https://docs.nginx.com/nginx/admin-guide/load-balancer/http-load-balancer/
示例如下：
upstream backend {
server backend1.example.com;
server backend2.example.com;
sticky cookie srv_id expires=1h domain=.example.com path=/;
}
2. Azure App Service
Azure pp Service是Azure雲平臺提供的App託管服務，具備多實例自動縮放的能力，
其有關會話親和性的配置如圖：
3. K8S nginx-ingress
註解nginx.ingress.kubernetes.io/affinity在入口的所有上游中啓用和設置親和性類型。
這樣，請求將總是被定向到相同的上游服務器。
https://kubernetes.github.io/ingress-nginx/examples/affinity/cookie/
That's All
本文以常見的圖片上傳功能爲例，實戰演練了Abp的緩存和持久化能力；
引申出對有狀態應用配置會話親和性，部署方式要結合業務功能。
希望對大家有所幫助！