如何使用 Blazor 上传文件？

Question

我找到了BlazorInputFile 库，但从 2019 年 10 月起仍有开放的 PR，我不确定这个库是否仍在维护。另外，我在博客中发现了几篇关于我们如何在 Blazor 中使用 JS 上传文件的文章。虽然如果可能的话我不想使用 JS，但我确实需要使用 Blazor 上传文件......是否可以不使用 JavaScript 这样做？

Answer 1

我正在尝试安装 SteveSandersonMS' repo，然后意识到，截至 2021 年 2 月，ASP.NET Core 5.0 中实际上有一个原生的 InputFile 组件。

它支持在Blazor中上传单个和多个文件，并且易于使用（您无需添加自己的JS文件等）。

我将它用于单个文件上传 - 您只需在 Razor 页面中添加 InputFile 组件：

<InputFile OnChange="@SingleUpload" />

然后在我的情况下，我需要字节数组中的文件：

@code {

   private async Task SingleUpload(InputFileChangeEventArgs e)
   {
       MemoryStream ms = new MemoryStream();
       await e.File.OpenReadStream().CopyToAsync(ms);
       var bytes = ms.ToArray();
       //do something with bytes
   }
}

InputFileChangeEventArgs 为您提供 IReadOnlyList 或 IBrowserFile，您可以使用它来获取 Name、LastModified、Size 和 ContentType，以及用于获取Stream.

关于如何在ASP.NET docs 中获取多个文件有很好的文档和代码。

您还需要添加 System.IO 命名空间：

@using System.IO

Answer 2

截至 2020 年 6 月，假设您使用表单，最好的方法 (WA) 是使用Tewr's FileReader。让我们从 API 开始，后控制器将是：

      public async Task<IActionResult> PostMedia(
        [FromForm] IFormFile Picture,
        [FromForm] string Focus,
        [FromForm] string ID,
        [FromForm] string Title,
        [FromForm] string FormType,
        [FromForm] string AnimalType,
        [FromForm] string Mode,
        [FromForm] string AnimalID
        )
    {
        Debug.WriteLine($"-------------------------------------{Focus}-----------------------------------------------");
        Debug.WriteLine($"-------------------------------------{ID}-----------------------------------------------");
        Debug.WriteLine($"-------------------------------------{Title}-----------------------------------------------");
        Debug.WriteLine($"-------------------------------------{FormType}-----------------------------------------------");
        Debug.WriteLine($"-------------------------------------{AnimalType}-----------------------------------------------");
        Debug.WriteLine($"-------------------------------------{Mode}-----------------------------------------------");
        Debug.WriteLine($"-------------------------------------{AnimalID}-----------------------------------------------");


        //check if file was fully uploaded
        if (Picture.Length == 0 || Picture == null)

            return BadRequest("Upload a new File");
        else
            return Ok ("do something with this data....") 
     }

那么客户端的post方法就是：

    public async Task PostFile()
  {
    //create content headers
    var content = new MultipartFormDataContent();
    content.Headers.ContentDisposition = new 
    System.Net.Http.Headers.ContentDispositionHeaderValue("form-data");

    //create content
    content.Add(new StreamContent(Pic.Stream, (int)Pic.Stream.Length), "Picture", Pic.FileName);
    content.Add(new StringContent(Pic.Title), "Title");
    content.Add(new StringContent(Pic.Focus), "Focus");
    content.Add(new StringContent(Pic.ID), "ID");
    content.Add(new StringContent(Pic.FormType), "FormType");
    content.Add(new StringContent(Pic.AnimalType), "AnimalType");
    content.Add(new StringContent(Pic.Mode), "Mode");
    content.Add(new StringContent(Pic.AnimalID), "AnimalID");
    //call to the server
    var upload = await Http.PostAsync("Media",content);

    //get server response
    Pic.Message = await upload.Content.ReadAsStringAsync();
   }

Tewr 文件阅读器可帮助您将文件读入流中，在我的例子中该流被传递给 Pic 对象。与表单中输入元素的 onchange 绑定的读取函数将是：

  public async Task ReadFile()
   {
    var file = (await fileReaderService.CreateReference(Xelement).EnumerateFilesAsync()).FirstOrDefault();

    if (file == null)  return;


    var fileInfo = await file.ReadFileInfoAsync();

    Pic.FileName = fileInfo.Name;


    // Read into RAM
    using (var memoryStream = await file.CreateMemoryStreamAsync((int)fileInfo.Size))
    {
        // Copy store image into pic object
        Pic.Stream = new MemoryStream(memoryStream.ToArray());
    }

}

注意Xelement是ElementReference，在表单中作为输入元素的ref使用。

Answer 3

在目前的情况下（截至 2020 年 4 月 2 日），您将需要 JS，这是不可避免的。

您可以采取两种主要方法：

• 在输入的 onchange 事件中获取文件数据，并通过将 byte[] 传递给它们来调用 C# 方法 - 这基本上是您在 Blazor 中获取文件数据的地方链接的文件选择器方法应用程序来做任何你想做的事。

• 在输入的onchange事件中获取文件数据，并使用JS调用将接收文件并对其进行处理的远程端点（例如将其保存在您的NAS上或将其放入您的D B）。这是一个实际的文件上传，而不是文件选择器。

从编码的角度来看，这两种方法是相似的——你需要 JS。也许在 Blazor 的未来版本中，我们将获得一个 <InputFile>，它将进行选择，以便您可以使用 C# HTTP 请求进行上传。

文件选择器方法相对容易实现（字面意思是几行），但它不会在服务器上给你一个文件，你必须为它工作一点。文件上传方法更难正确。我会亲自使用别人的包。对于文件上传，Telerik UI for Blazor 之类的东西可能适合商业用途，对于更简单的选择器，已经有另一个链接示例的答案。顺便说一句，Telerik 的演示也有一个这样的示例，例如为某些演示实现的组件。

Answer 4

我通过使用一个组件和一些 javascript（看起来像一个按钮）来做到这一点。组件和js一旦合并，就再也不用担心了……

这是上传组件 (Upload.Razor)：

@inject IJSRuntime JSRuntime

@if (AllowMulitple)
{
    <input id="Xinputfile00" type="file" accept="@Filter" @onchange="UploadFile" multiple hidden />
}
else
{
    <input id="Xinputfile00" type="file" accept="@Filter" @onchange="UploadFile" hidden />
}
<button class="btn btn-default" @onclick="ClickUpload">@Title</button>

@code {

    [Parameter]
    public FileData[] Files { get; set; }

    [Parameter]
    public string Filter { get; set; }

    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public bool AllowMulitple { get; set; }

    [Parameter]
    public Action Uploaded { get; set; }

    async Task UploadFile()
    {
        string[] result = await JSRuntime.InvokeAsync<string[]>("blazorExtensions.GetFileData", "Xinputfile00");
        List<FileData> results = new List<FileData>();
        foreach (string file in result)
        {
            results.Add(new FileData(file));
        }
        this.Files = results.ToArray();
        if (Uploaded != null)
        {
            Uploaded();
        }
    }

    async Task ClickUpload()
    {
        await JSRuntime.InvokeVoidAsync("blazorExtensions.InvokeClick", "Xinputfile00");
    }

    public class FileData
    {
        public string Base64 { get; set; }
        public string MIMEType { get; set; }

        public byte[] Bytes
        {
            get
            {
                return Convert.FromBase64String(this.Base64);
            }
        }

        public FileData(string data)
        {
            if (string.IsNullOrWhiteSpace(data) || !data.Contains(","))
            {
                return;
            }
            string[] alldata = data.Split(',');
            this.MIMEType = alldata[0].Remove(0, 5).Replace(";base64", "");
            this.Base64 = alldata[1];
        }

    }

这是 javascript 摘录：

window.blazorExtensions = {

    GetFileData: async function (id) {
        var target = document.getElementById(id);
        var filesArray = Array.prototype.slice.call(target.files);
        return Promise.all(filesArray.map(window.blazorExtensions.fileToDataURL));
    },

    fileToDataURL: async function (file) {
        var reader = new FileReader();
        return new Promise(function (resolve, reject) {
            reader.onerror = function () {
                reader.abort();
                reject(new DOMException('Error occurred reading file ' + file));
            };
            reader.onload = function (event) {
                resolve(reader.result);
                console.log('resolved');
            };
            reader.readAsDataURL(file);
            console.log('returned');
        })
    },  

    InvokeClick: function (id) {
        var elem = document.getElementById(id);
        if (typeof elem.onclick == "function") {
            elem.onclick.apply(elem);
        }
        elem.click();
    },
}

这是一个调用标记示例：

<Upload @ref="upload" Filter=".xlsx" Title="Upload" AllowMulitple="false" Uploaded="DoMyExcelThingOrSomething" />

以及上传后调用的方法：

    Upload upload;
    void DoMyExcelThingOrSomething()
{
    if (upload.Files.Length < 1 || string.IsNullOrWhiteSpace(upload.Files[0].Base64))
    {
        //...nothing good here...
        return;
    }
    //play with upload.Files here...
}