日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

asp.net6?blazor?文件上傳功能_實用技巧

作者：j4587698 ? 更新時間： 2022-07-23 編程語言

微軟在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來將文件保存。

原文鏈接：https://www.cnblogs.com/j4587698/p/16301706.html

欄目分類
最近更新