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

