asp.net6?blazor?文件上傳功能
微軟在asp.net6中給blazor新增了一個IJSStreamReference
的接口。
我們今天的所有內(nèi)容,都要依賴這個接口,因為它可以把流直接傳到c#中,這樣我們就可以做很多的騷操作了。
今天我們來做一個簡單的文件上傳,這里以bootstrapblazor中新的CherryMarkdown組件為例。
首先,CherryMarkdown
本身就支持文件上傳處理,所以我們可以直接拿到js
中的file
,這里就不用考慮獲取文件的方式了。
這里我們直接用window
來保存這個file
對象,這樣操作應(yīng)該是最簡單的。
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]
為我們要上傳的文件內(nèi)容。
然后再寫一個方法來返回這個window.files[0]
。
export function bb_cherry_markdown_file(){ return window.files[0]; }
這樣,我們的js部分就搞定了,無需webapi,也無需其他的支持。
下面我們來看c#部分,也是相當(dāng)簡單。
首先我們寫一個Upload
方法來接收文件上傳的請求。
/// <summary> /// 文件上傳回調(diào) /// </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) { // 文件保護(hù),如果文件存在則先刪除 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
方法可以將流保存為文件。
然后就是最關(guān)鍵的這行代碼:
var stream = await Module.InvokeAsync<IJSStreamReference>("bb_cherry_markdown_file");
我們調(diào)用剛剛js中的bb_cherry_markdown_file
方法來獲取瀏覽器中的window.files[0]
,就可以返回一個stream
,然后我們就可以結(jié)合CherryMarkdownUploadFile
來將文件保存。
到此這篇關(guān)于asp.net6 blazor 文件上傳的文章就介紹到這了,更多相關(guān)asp.net6文件上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
ASP.NET Core MVC 中實現(xiàn)中英文切換的示例代碼
這篇文章主要介紹了ASP.NET Core MVC 中實現(xiàn)中英文切換的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02ASP.NET?MVC項目實現(xiàn)三級聯(lián)動無刷新
這篇文章介紹了ASP.NET?MVC項目實現(xiàn)三級聯(lián)動無刷新的方法,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-07-07Asp.Net 生成靜態(tài)頁并實現(xiàn)分頁效果
Asp.Net 生成靜態(tài)頁并實現(xiàn)分頁效果的代碼,需要的朋友可以參考下。2010-04-04