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文件上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

ASP.NET Core中的Caching组件简介
这篇文章介绍了ASP.NET Core中的Caching组件，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-04-04
Asp.Net Core Web应用程序—探索
这篇文章主要介绍了Asp.Net Core Web应用程序—探索，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
asp.net下无法循环绑定投票的标题和选项的解决方法
asp.net下无法循环绑定投票的标题和选项与无法循环获得用户的选择的解决方法。
2010-12-12
.NET内存泄漏分析Windbg项目实例
这篇文章介绍了.NET内存泄漏分析Windbg项目实例，文中通过示例代码介绍的非常详细。对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-12-12
asp.net中List的使用方法
.net真是方便，这几天帮朋友写了个小软件，用它还真感觉轻松自在，很称手，自带的类库既丰富又实用
2008-10-10
.NET Framework拦截HTTP请求的实现
本文主要介绍了.NET Framework拦截HTTP请求的实现,主要用于记录 HTTP 信息,调试程序、分析程序性能等方面,具有一定的参考价值,感兴趣的可以了解一下
2024-03-03
asp.net更新指定记录的方法
这篇文章主要介绍了asp.net更新指定记录的方法,涉及针对指定ID调用update语句的方法,是非常实用的技巧,需要的朋友可以参考下
2014-11-11
Asp.net发送邮件的两种方法小结
这几天看了一下Asp.net发送邮件方面的东西，记得之前的IIS6上有SMTP服务器，可以直接利用这个进行邮件发送，现在的开发环境是Windows 7，找了半天没有找到，到网络上查了才知道原来windows 7和Vista都将SMTP服务器去掉了，现在将两种方法总结一下。
2010-06-06
asp.net core 获取 MacAddress 地址方法示例
这篇文章主要介绍了asp.net core获取MacAddress地址方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
解析.Net 4.0 中委托delegate的使用详解
本篇文章是对.Net 4.0 中委托delegate的使用进行了详细的分析介绍，需要的朋友参考下
2013-05-05

asp.net6 blazor 文件上传功能

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具