asp.net6?blazor?文件上傳功能
更新時間：2022年05月24日 10:25:49 作者：j4587698
這篇文章主要介紹了asp.net6?blazor?文件上傳,我們今天的所有內容，都要依賴這個接口，因為它可以把流直接傳到c#中，這樣我們就可以做很多的騷操作了，需要的朋友可以參考下
微軟在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來將文件保存。
到此這篇關于asp.net6 blazor 文件上傳的文章就介紹到這了,更多相關asp.net6文件上傳內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章介紹了ASP.NET?Core中的Caching組件，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-04-04
這篇文章主要介紹了Asp.Net Core Web應用程序—探索，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
asp.net下無法循環(huán)綁定投票的標題和選項的解決方法
asp.net下無法循環(huán)綁定投票的標題和選項與無法循環(huán)獲得用戶的選擇的解決方法。2010-12-12
這篇文章介紹了.NET內存泄漏分析Windbg項目實例，文中通過示例代碼介紹的非常詳細。對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-12-12
.net真是方便，這幾天幫朋友寫了個小軟件，用它還真感覺輕松自在，很稱手，自帶的類庫既豐富又實用2008-10-10
.NET Framework攔截HTTP請求的實現(xiàn)
本文主要介紹了.NET Framework攔截HTTP請求的實現(xiàn),主要用于記錄 HTTP 信息,調試程序、分析程序性能等方面,具有一定的參考價值,感興趣的可以了解一下2024-03-03
這篇文章主要介紹了asp.net更新指定記錄的方法,涉及針對指定ID調用update語句的方法,是非常實用的技巧,需要的朋友可以參考下2014-11-11
這幾天看了一下Asp.net發(fā)送郵件方面的東西，記得之前的IIS6上有SMTP服務器，可以直接利用這個進行郵件發(fā)送，現(xiàn)在的開發(fā)環(huán)境是Windows 7，找了半天沒有找到，到網(wǎng)絡上查了才知道原來windows 7和Vista都將SMTP服務器去掉了，現(xiàn)在將兩種方法總結一下。2010-06-06
asp.net core 獲取 MacAddress 地址方法示例
這篇文章主要介紹了asp.net core獲取MacAddress地址方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
本篇文章是對.Net 4.0 中委托delegate的使用進行了詳細的分析介紹，需要的朋友參考下2013-05-05