asp.net6 blazor 檔案上傳

微軟在asp.net6中給blazor新增了一個IJSStreamReference的介面。

我們今天的所有內容，都要依賴這個介面，因為它可以把流直接傳到c#中，這樣我們就可以做很多的騷操作了。

今天我們來做一個簡單的檔案上傳，這裡以bootstrapblazor中新的CherryMarkdown元件為例。

首先，CherryMarkdown本身就支援檔案上傳處理，所以我們可以直接拿到js中的file，這裡就不用考慮獲取檔案的方式了。

這裡我們直接用window來儲存這個file物件，這樣操作應該是最簡單的。

                    fileUpload(file, callback) {
                        window.files = {};
                        window.files[0] = file;
                        obj.invokeMethodAsync('Upload', {
                            fileName: file.name,
                            fileSize: file.size,
                            contentType: file.type,
                            lastModified: new Date(file.lastModified).toISOString(),
                        }).then(data => {
                            if (data !== "") {
                                callback(data);
                            }
                        })
                    },

這裡我們定義了window.files[0]為我們要上傳的檔案內容。

然後再寫一個方法來返回這個window.files[0]。

export function bb_cherry_markdown_file(){
    return window.files[0];
}

這樣，我們的js部分就搞定了，無需webapi，也無需其他的支援。

下面我們來看c#部分，也是相當簡單。

首先我們寫一個Upload方法來接收檔案上傳的請求。

    /// <summary>
    /// 檔案上傳回撥
    /// </summary>
    /// <param name="uploadFile"></param>
    [JSInvokable]
    public async Task<string> Upload(CherryMarkdownUploadFile uploadFile)
    {
        var stream = await Module.InvokeAsync<IJSStreamReference>("bb_cherry_markdown_file");
        var data = await stream.OpenReadStreamAsync();
        uploadFile.UploadStream = data;
        if (OnFileUpload == null)
        {
            return "";
        }
        return await OnFileUpload.Invoke(uploadFile);
    }

這裡的CherryMarkdownUploadFile如下：

/// <summary>
/// 檔案資訊
/// </summary>
public class CherryMarkdownUploadFile
{
    /// <summary>
    /// 檔名
    /// </summary>
    public string? FileName { get; set; }

    /// <summary>
    /// 檔案大小
    /// </summary>
    public long FileSize { get; set; }

    /// <summary>
    /// 最後修改日期
    /// </summary>
    public string? LastModified { get; set; }

    /// <summary>
    /// 檔案型別
    /// </summary>
    public string? ContentType { get; set; }

    /// <summary>
    /// 上傳的檔案流
    /// </summary>
    public Stream? UploadStream { get; set; }

    /// <summary>
    /// 返回碼，0為成功，非0失敗
    /// </summary>
    public int Code { get; set; }

    /// <summary>
    /// 錯誤資訊
    /// </summary>
    public string? Error { get; set; }

    /// <summary>
    /// 儲存到檔案
    /// </summary>
    /// <param name="fileName"></param>
    /// <param name="token"></param>
    /// <returns></returns>
    public async Task<bool> SaveToFile(string fileName, CancellationToken token = default)
    {
        var ret = false;
        if (UploadStream != null)
        {
            // 檔案保護，如果檔案存在則先刪除
            if (System.IO.File.Exists(fileName))
            {
                try
                {
                    System.IO.File.Delete(fileName);
                }
                catch (Exception ex)
                {
                    Code = 1002;
                    Error = ex.Message;
                }
            }

            var folder = Path.GetDirectoryName(fileName);
            if (!string.IsNullOrEmpty(folder) && !Directory.Exists(folder))
            {
                Directory.CreateDirectory(folder);
            }

            if (Code == 0)
            {
                using var uploadFile = File.OpenWrite(fileName);

                try
                {
                    // 開啟檔案流
                    var stream = UploadStream;

                    var buffer = new byte[4 * 1096];
                    int bytesRead = 0;

                    // 開始讀取檔案
                    while ((bytesRead = await stream.ReadAsync(buffer, token)) > 0)
                    {
                        await uploadFile.WriteAsync(buffer.AsMemory(0, bytesRead), token);

                    }
                    ret = true;
                }
                catch (Exception ex)
                {
                    Code = 1003;
                    Error = ex.Message;
                }
            }
        }
        return ret;
    }

}

可以用來接收js中的

obj.invokeMethodAsync('Upload', {
                            fileName: file.name,
                            fileSize: file.size,
                            contentType: file.type,
                            lastModified: new Date(file.lastModified).toISOString(),
                        }).then(data => {
                            if (data !== "") {
                                callback(data);
                            }
                        })

並且有一個SaveToFile方法可以將流儲存為檔案。

然後就是最關鍵的這行程式碼：

var stream = await Module.InvokeAsync<IJSStreamReference>("bb_cherry_markdown_file");

我們呼叫剛剛js中的bb_cherry_markdown_file方法來獲取瀏覽器中的window.files[0]，就可以返回一個stream，然後我們就可以結合CherryMarkdownUploadFile來將檔案儲存。