Minimal implementation of file upload API implemented by asp.net core

[SmRiley]

就目前而言,无论是Server还是Wasm都只能通过WebAPI上传,如果你需要使用Stream进行处理,还是使用官方的InputFile吧.不知道后续是否有实现Stream的计划,毕竟有这个的话在Server Inside上能省去写Controller的麻烦
这里给出使用Asp.Net Core的最小Upload WebApi实现
这个案例里面使用Jwt进行鉴权并且上传文件格式限定为Png,你可以按照自己需求进行替换

For now, both Server and Wasm can only be uploaded via WebAPI. If you need to use Stream for processing, use the official InputFile. I don't know if there are plans to implement Stream in the future. After all, if there is this, it is on Server Inside. Can save the trouble of writing Controller
Here is the implementation of the minimal upload interface implemented by WebApi using Asp.Net Core
In this case, jwt is used as authentication and the upload format is limited to Png, you can replace it according to your needs.

[ApiController(Role="admin")]
[Route("Admin/[action]")]
[Authorize]
public class AdminController : ControllerBase
{
    private readonly string imgsPath;

    public AdminController(IWebHostEnvironment hostEnvironment)
    {
        imgsPath = Path.Combine(hostEnvironment.WebRootPath, "Imgs");
    }

    /// <summary>
    /// Upload FileName
    /// </summary>
    /// <returns></returns>
    [HttpPost]
    public async Task<IActionResult> UpLoadImageAsync(IFormFile image)
    {
        if (Path.GetExtension(image.FileName) != ".png")
        {
            return ToApiFormat("Upload failed, the file must be a png format image", ApiStatus.Fail);
        }

        if (image.Length > 1024 * 500)
        {
            return ToApiFormat("Upload failed, the image size must be less than 500KB", ApiStatus.Fail);
        }

        var (name, url) = await SaveImgAsync(image);
        var uploadRs = new UploadRs()
        {
            Name = name,
            Url = url
        };

        return ToApiFormat(uploadRs, "Uploaded successfully", ApiStatus.Success);
    }

    /// <summary>
    /// Return name and url after saving
    /// </summary>
    /// <param name="Img">File</param>
    /// <param name="ImgName">FileName</param>
    /// <returns></returns>
    private async Task<(string name, string url)> SaveImgAsync(IFormFile Img, string ImgName = null)
    {
        if (string.IsNullOrEmpty(ImgName))
        {
            ImgName = $"{Guid.NewGuid()}{Path.GetExtension(Img.FileName)}";
        }
        var PathStr = Path.Combine(imgsPath,ImgName);
        if (System.IO.File.Exists(PathStr))
        {
            System.IO.File.Delete(PathStr);
        }
        using (var FileStream = System.IO.File.OpenWrite(PathStr))
        {
            await Img.CopyToAsync(FileStream);
        }
        return (ImgName, $@".\Imgs\{ImgName}");
    }
}

我是菜鸟，如果代码有遗漏或者错误，可以提出或者补充
I am a novice, if there are omissions or errors in the code, you can suggest or add

[anranruye]

You can use public async Task<IActionResult> UpLoadImageAsync(IFormFile image) to simplify the code.

[SmRiley]

You can use to simplify the code.public async Task<IActionResult> UpLoadImageAsync(IFormFile image)

I have tried to use parameter binding to get the file, but I can't get the file during debugging with postman. I don't know if it is a mistake in my operation. Can you try to see if it works?

[anranruye]

try public async Task<IActionResult> UpLoadImageAsync([FromForm] IFormFile image)

[SmRiley]

Corrected, thanks

[LeaderXinjianSun]

请问，你能把前端的Razor代码也分享出来吗？:raising_hand:

[SmRiley]

请问，你能把前端的Razor代码也分享出来吗？🙋

@inherits ComponentBase
@inject NavigationManager _navManage
@inject MessageService _message
@inject IWebHostEnvironment _environment
@inject IConfiguration _configuration

<Upload Action="@($"{APIUrl}/Upload")"
        Name="image"
        Style="width:10rem;height:10rem;"
        Accept=@MimeType
        Class="avatar-uploader"
        ListType="picture-card"
        ShowUploadList="false"
        Headers=@headers
        BeforeUpload=@BeforeUpload
        OnCompleted=@OnCompleted>
    @if (!string.IsNullOrWhiteSpace(Url))
    {
        <img src=@(Path.Combine(APIUrl,Url)) alt="avatar" style="height:100%" />
    }
    else
    {
        <div>
            <Icon Spin="loading" Type="@(loading?"Loading":"plus")"></Icon>
            <div className="ant-upload-text">Upload</div>
        </div>
    }
</Upload>

//Code:

bool BeforeUpload(UploadFileItem file)
    {
        var IsPng = file.Type == "image/png";
        if (!IsPng)
        {
            _message.Error("文件格式错误,请重新选择!");
        }
        var IsLt500K = file.Size < 1024 * 500;
        if (!IsLt500K)
        {
            _message.Error("图片需不大于500KB!");
        }
        if (IsPng && IsLt500K)
        {
            var jwt = EncryUtil.GenerateToken(
               new Claim[] { new Claim("role", "Admin") },
               TimeSpan.FromMinutes(5)
            );
            headers.Remove("Authorization");
            headers.TryAdd("Authorization", $"Bearer {jwt}");
            loading = true;
            _message.Loading(GetMsgConfig("上传中"));
        }
        return IsPng && IsLt500K;
    }

    async Task OnCompleted(UploadInfo fileinfo)
    {
        loading = fileinfo.File.State == UploadState.Uploading;
        if (fileinfo.File.State == UploadState.Success)
        {
            var rsObj = JsonSerializer.Deserialize<BaseResult<UploadRs>>(fileinfo.File.Response, JsonUtil.JsonSerOpt)!;
            if (rsObj.Status == ApiStatus.Success)
            {
                await UrlChanged.InvokeAsync(rsObj.Data.Url);
                _ = _message.Success(GetMsgConfig("上传成功"));
            }
            else
            {
                _ = _message.Error(GetMsgConfig(rsObj.Message));
            }
        }

        if (fileinfo.File.State == UploadState.Fail)
        {
             _ = _message.Error(GetMsgConfig("上传失败, 请检查跨域和服务端设置..."));
        }
        await Task.Delay(2000);
        _message.Destroy();
    }

It may not apply to you, I have done jwt authentication, you can remove this part

[LeaderXinjianSun]

终于能用了！:pig:
非常感谢！

[ElderJames]

Minimal API:

app.MapGet("/upload", async (IFormFile file) =>
{
    var uploads = Path.Combine(uploadsPath, file.FileName);
    using var fileStream = File.OpenWrite(uploads);
    using var uploadStream = file.OpenReadStream();
    await uploadStream.CopyToAsync(fileStream);
});

[lyj0309]

没有调用api，节省代码，直接使用b64储存图片（头像）

                    <InputFile OnChange="ResizeAndDisplayImageUsingStreaming" />
                    <Image Width="200px"
                   Height="200px"
                   Src="@newUser.Avatar"
                   PreviewSrc="@newUser.Avatar"
                    />

    private async Task ResizeAndDisplayImageUsingStreaming(InputFileChangeEventArgs e)
    {
        try
        {
            var imageFile = e.File;
            var resizedImage = await imageFile.RequestImageFileAsync("image/png", 250, 250);


            MemoryStream ms = new MemoryStream();
            await resizedImage.OpenReadStream().CopyToAsync(ms);
            var bytes = ms.ToArray();


            var b64 = Convert.ToBase64String(bytes);
            Console.WriteLine($"b64{b64}");

            newUser.Avatar = "data:image/png;base64," + b64;
        }
        catch (Exception ex)
        {
            Console.WriteLine($"error{ex}");
        }
    }

ps:图片默认最大500k