Blazor WebAssembly PWA - IFormFile FromForm 始終為 null

Question

我已經設置了一個Blazor WebAssembly ASP.Net Core hosted PWA項目，並在其中使用Azure Cognitive Services 。 因此，我在我的一個客戶端視圖中有一個表單，用戶可以在其中上傳圖像，這將被稱為 Azure。

在剃刀視圖中，我有這個：

@inject HttpClient client;
@inject IFileReaderService FileReader;
@inject NavigationManager navi;

<div class="text-center">
    <input class="btn btn-secondary " name="file" @ref="InpReference" type="file" id="file-selector" placeholder="Brows" accept="image/*" capture="camera" @onclick="InputFile">

    @if (_fileSelected != false)
    {
        <input class="btn btn-primary" type="button" role="button" id="startbutton" @onclick="Upload" value="upload" />
    }
</div>

@code {
        private async Task Upload()
        {
            // content base structure
            MultipartFormDataContent content = new MultipartFormDataContent();
            content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("form-data");
    
            
            foreach (/*IFileReference*/var fileReference in fileReferences)
            {
                Console.WriteLine("test1");
                // getting the file size
                IFileInfo fileinfo = await fileReference.ReadFileInfoAsync();
                Stream fileStream;
                var fileReferencesArray = fileReferences.ToArray();
                using (var fs = await fileReference.CreateMemoryStreamAsync((int)fileinfo.Size))
                {
                    Console.WriteLine("test2");
                    fileStream=new MemoryStream(fs.ToArray());
                }
                Console.WriteLine("test4" + fileinfo.Size);
                StreamContent sc = new StreamContent(fileStream, (int)fileStream.Length);
                content.Add(sc, "file", fileinfo.Name);
                Console.WriteLine("test5");
            }
            Console.WriteLine("test6");
            var response = await client.PostJsonAsync<List<Prediction>>("api/Azure/Prediction", content);
            Console.WriteLine(response.Count + " : " + response.GetType().ToString());
            foreach (var prediction in  response)
            {
                Console.WriteLine(prediction.Id + ":" + prediction.Name + "," + prediction.Probability.ToString());
            }
            navi.NavigateTo("detailView/");
    
    
        }
}

我的 WebApi Controller 用於處理：

    ...
        [HttpPost]
        public List<Prediction> getPrediction([FromForm]IFormFile file)
        {
            if (file == null)
            {
                return new List<Prediction>();
            }
            List<Prediction> predicitions = azure_Client.GetPrediction(file.OpenReadStream());
            return predicitions;
        }
    ...

問題是 controller 中的[FromForm]IFormFile file始終為null 。 這只是PWA項目中的 null。 我在沒有PWA的情況下設置了相同的項目並且它可以工作，它不是null ，它正在從視圖中獲取選定的圖像！ 那里有什么區別，為什么HttpClient與Blazor WebAssembly ASP.Net Core hosted中的做法不同？

Answer 1

根據我的測試，如果要在 Blazor WebAssembly ASP.Net Core 托管 PWA 中上傳文件，請參考以下步驟

1. 客戶端（我使用 sdk Tewr.Blazor.FileReader ）

   一個。 更新Program.cs

    builder.Services.AddFileReaderService(options => { options.UseWasmSharedBuffer = true; }); builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

   灣。 上傳文件razor-view

@using System.IO
@using Blazor.FileReader

@inject HttpClient client;
@inject IFileReaderService fileReader
<h1>File uplaod Blzaor WebAssembly!</h1>
<div class="row">
    <div class="col-4">
        <div class="form-group">
            <input type="file" name="image" @ref="inputReference" @onchange="async() =>await OpenFile()" />
            <ul>
                <li>File Name: @fileName</li>
                <li>Size: @size</li>
                <li>Type: @type</li>
            </ul>

        </div>
        <button class="btn btn-block btn-success" @onclick="async() =>await UploadFile()"> Upload File</button>
        @if (!string.IsNullOrWhiteSpace(message))
        {
            <div class="alert alert-success">
                File has been uplaoded
            </div>

        }
    </div>   
</div>


@code{
    ElementReference inputReference;
    string message = string.Empty;
    string fileName = string.Empty;
    string type = string.Empty;
    string size = string.Empty;
    Stream fileStream=null;

    async Task UploadFile()
    {
        var content = new MultipartFormDataContent();
        content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("form-data");
        var sc = new StreamContent(fileStream, (int)fileStream.Length);
        content.Add(sc, "image", fileName);


        var response = await client.PostAsync("/upload", content);
        if (response.IsSuccessStatusCode) {
            message = "OK";
        }

    }

    async Task OpenFile()
    {
        var file = (await fileReader.CreateReference(inputReference).EnumerateFilesAsync()).FirstOrDefault();

        if (file == null) {
            return;
        }

        var fileInfo=await file.ReadFileInfoAsync();
        fileName = fileInfo.Name;
        type = fileInfo.Type;
        size = $"{fileInfo.Size} Bytes";

        using (var ms = await file.CreateMemoryStreamAsync((int)fileInfo.Size)) {
            fileStream = new MemoryStream(ms.ToArray());
        }
    }



}

2. 服務器

API COntroller

 [HttpPost]
        public async Task<IActionResult> Post([FromForm(Name ="image")]IFormFile file) {

            if (file == null || file.Length == 0) {
                return BadRequest("do not receive file");
            }

            var fileName = file.FileName;
            var extension = Path.GetExtension(fileName);
            var newFileName = $"{Guid.NewGuid()}{extension}";
            var filePath = Path.Combine(_env.ContentRootPath, "Images", newFileName);
            if (!Directory.Exists(Path.Combine(_env.ContentRootPath, "Images"))) {
                Directory.CreateDirectory(Path.Combine(_env.ContentRootPath, "Images"));
            
            }
            using (var stream = new FileStream(filePath, FileMode.Create, FileAccess.Write)) {
                await file.CopyToAsync(stream);
            }
            
            return Ok(filePath);
        
        }

3. 結果