🚀 优质资源分享 🚀
| 学习路线指引（点击解锁） | 知识定位 | 人群定位 |
|---|---|---|
| 🧡 Python实战微信订餐小程序 🧡 | 进阶级 | 本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。 |
| 💛Python量化交易实战💛 | 入门级 | 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统 |
微软在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方法来接收文件上传的请求。
/// /// 文件上传回调/// /// [JSInvokable]public async Task<string> Upload(CherryMarkdownUploadFile uploadFile){var stream = await Module.InvokeAsync("bb\_cherry\_markdown\_file");var data = await stream.OpenReadStreamAsync();uploadFile.UploadStream = data;if (OnFileUpload == null){return "";}return await OnFileUpload.Invoke(uploadFile);}
这里的CherryMarkdownUploadFile如下：
///
/// 文件信息
///
public class CherryMarkdownUploadFile
{/// /// 文件名/// public string? FileName { get; set; }/// /// 文件大小/// public long FileSize { get; set; }/// /// 最后修改日期/// public string? LastModified { get; set; }/// /// 文件类型/// public string? ContentType { get; set; }/// /// 上传的文件流/// public Stream? UploadStream { get; set; }/// /// 返回码，0为成功，非0失败/// public int Code { get; set; }/// /// 错误信息/// public string? Error { get; set; }/// /// 保存到文件/// /// /// /// 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来将文件保存。
