ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64)

简介:

ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64)

七牛图片上传 SDK(.NET 版本):https://developer.qiniu.com/kodo/sdk/1237/csharp

UpoladService示例代码:

public class UpoladService : IUpoladService
{
    private readonly static string[] _imageExtensions = new string[] { ".jpg", ".png", ".gif", ".jpeg", ".bmp" };
    private AppSettings _appSettings;

    public UpoladService(IOptions<AppSettings> appSettings)
    {
        _appSettings = appSettings.Value;
    }

    public async Task<SubmitResult> UploadStream(Stream stream, string fileName, AppType appType)
    {
        if (stream == null)
        {
            return SubmitResult.Fail("图片为null");
        }
        if (string.IsNullOrWhiteSpace(fileName))
        {
            return SubmitResult.Fail("图片名称为空");
        }
        try
        {
            var extensionName = fileName.Substring(fileName.LastIndexOf("."));
            if (!_imageExtensions.Contains(extensionName.ToLower()))
            {
                return SubmitResult.Fail("图片格式有误");
            }
            var generateFileName = $"{DateTime.Now.ToString("yyyyMMddHHmmssfff-")}{Guid.NewGuid().GetHashCode().ToString().Replace("-", string.Empty)}{extensionName}";
            var saveKey = $"wl/{appType.ToString().ToLower()}/{generateFileName}";

            // 生成(上传)凭证时需要使用此Mac
            // 这个示例单独使用了一个Settings类,其中包含AccessKey和SecretKey
            // 实际应用中,请自行设置您的AccessKey和SecretKey
            Mac mac = new Mac(_appSettings.AccessKey, _appSettings.SecretKey);
            // 上传策略,参见 
            // https://developer.qiniu.com/kodo/manual/put-policy
            PutPolicy putPolicy = new PutPolicy();
            // 如果需要设置为"覆盖"上传(如果云端已有同名文件则覆盖),请使用 SCOPE = "BUCKET:KEY"
            // putPolicy.Scope = bucket + ":" + saveKey;
            putPolicy.Scope = _appSettings.Bucket;
            // 上传策略有效期(对应于生成的凭证的有效期)   
            putPolicy.SetExpires(3600);
            // 上传到云端多少天后自动删除该文件,如果不设置(即保持默认默认)则不删除
            //putPolicy.DeleteAfterDays = 1;

            // 生成上传凭证,参见
            // https://developer.qiniu.com/kodo/manual/upload-token            
            string jstr = putPolicy.ToJsonString();
            string token = Auth.CreateUploadToken(mac, jstr);

            FormUploader fu = new FormUploader();
            var result = await fu.UploadStreamAsync(stream, saveKey, token);
            if (result.Code == 200)
            {
                return SubmitResult.Success($"{_appSettings.Domain}/{saveKey}");
            }
            return SubmitResult.Fail("上传失败");
        }
        catch (Exception ex)
        {
            return SubmitResult.Fail($"上传失败:{ex.Message}");
        }
    }
}

UploadController示例代码:

[EnableCors("default")]
[Route("upload")]
public class UploadController : WebApiController
{
    private IUpoladService _upoladService;

    public UploadController(IUpoladService upoladService)
    {
        _upoladService = upoladService;
    }

    [Route("{appType}/stream")]
    [HttpPost]
    public async Task<IActionResult> UploadByStream(AppType appType)
    {
        if (Request.Form.Files.Count == 0)
        {
            return Fail("图片不存在");
        }
        var file = Request.Form.Files[0];
        var result = await _upoladService.UploadStream(file.OpenReadStream(), file.FileName, appType);
        if (result.IsSuccess)
        {
            return Ok(new { pic_url = result.Data, is_success = true });
        }
        return Fail(result.Message);
    }

    [Route("{appType}/base64")]
    [HttpPost]
    public async Task<IActionResult> UploadByBase64([FromBody]JObject data, AppType appType)
    {
        var imageBase64 = data["image_base64"].ToObject<string>();
        var fileName = data["file_name"].ToObject<string>();
        if (!string.IsNullOrWhiteSpace(imageBase64))
        {
            var reg = new Regex("data:image/(.*);base64,");
            imageBase64 = reg.Replace(imageBase64, "");
            byte[] imageByte = Convert.FromBase64String(imageBase64);
            var stream = new MemoryStream(imageByte);

            var result = await _upoladService.UploadStream(stream, fileName, appType);
            if (result.IsSuccess)
            {
                return Ok(new { pic_url = result.Data, is_success = true });
            }
            return Fail(result.Message);
        }
        return Json(new { success = false, result = "请选择文件!" });
    }
}

JS 上传图片示例代码:

<form method="post" enctype="multipart/form-data">
    <input type="file" id="files"
            name="files" multiple />
    <input type="button"
            id="uploadStream"
            value="Upload Selected Files" />

    <input type="button"
            id="uploadBase64"
            value="Upload Selected Files" />
</form>

<script>
$(document).ready(function () {
    $("#upload").click(function (evt) {
        var fileUpload = $("#files").get(0);
        var files = fileUpload.files;
        var data = new FormData();
        for (var i = 0; i < files.length; i++) {
            data.append(files[i].name, files[i]);
        }
        $.ajax({
            type: "POST",
            url: "http://localhost:5002/upload/avatar/stream",
            processData: false,
            contentType: false,
            data: data,
            success: function (data) {
                if (data.is_success) {
                    console.log(data.pic);
                }
                else {
                    console.log(data.msg);
                }
                console.log(data);
            },
            error: function () {
                console.log("There was error uploading files!");
            }
        });
    });

    $("#uploadBase64").click(function (evt) {
        var fileUpload = $("#files").get(0);
        var files = fileUpload.files;
        var data = {};

        //生成base64
        var reader = new FileReader();
        reader.readAsDataURL(files[0]);
        reader.onload = function () {
            data.image_base64 = reader.result;
            data.file_name = files[0].name;

            $.ajax({
                type: "POST",
                url: "http://localhost:5002/upload/avatar/base64",
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify(data),
                dataType: 'json',
                success: function (data) {
                    if (data.is_success) {
                        console.log(data.pic);
                    }
                    else {
                        console.log(data.msg);
                    }
                    console.log(data);
                },
                error: function () {
                    console.log("There was error uploading files!");
                }
            });
            return reader.result;
        };
        reader.onerror = function (error) {
            console.log('Error: ', error);
        };
    });
});
</script>

本文转自田园里的蟋蟀博客园博客,原文链接:http://www.cnblogs.com/xishuai/p/asp-net-core-upload-image-with-qiniu.html,如需转载请自行联系原作者

相关文章
|
8天前
|
开发框架 .NET 开发者
简化 ASP.NET Core 依赖注入(DI)注册-Scrutor
Scrutor 是一个简化 ASP.NET Core 应用程序中依赖注入(DI)注册过程的开源库,支持自动扫描和注册服务。通过简单的配置,开发者可以轻松地从指定程序集中筛选、注册服务,并设置其生命周期,同时支持服务装饰等高级功能。适用于大型项目,提高代码的可维护性和简洁性。仓库地址:&lt;https://github.com/khellang/Scrutor&gt;
30 5
|
2月前
|
存储 开发框架 JSON
ASP.NET Core OData 9 正式发布
【10月更文挑战第8天】Microsoft 在 2024 年 8 月 30 日宣布推出 ASP.NET Core OData 9,此版本与 .NET 8 的 OData 库保持一致,改进了数据编码以符合 OData 规范,并放弃了对旧版 .NET Framework 的支持,仅支持 .NET 8 及更高版本。新版本引入了更快的 JSON 编写器 `System.Text.UTF8JsonWriter`,优化了内存使用和序列化速度。
|
26天前
|
开发框架 .NET C#
在 ASP.NET Core 中创建 gRPC 客户端和服务器
本文介绍了如何使用 gRPC 框架搭建一个简单的“Hello World”示例。首先创建了一个名为 GrpcDemo 的解决方案,其中包含一个 gRPC 服务端项目 GrpcServer 和一个客户端项目 GrpcClient。服务端通过定义 `greeter.proto` 文件中的服务和消息类型,实现了一个简单的问候服务 `GreeterService`。客户端则通过 gRPC 客户端库连接到服务端并调用其 `SayHello` 方法,展示了 gRPC 在 C# 中的基本使用方法。
38 5
在 ASP.NET Core 中创建 gRPC 客户端和服务器
|
16天前
|
开发框架 缓存 .NET
GraphQL 与 ASP.NET Core 集成:从入门到精通
本文详细介绍了如何在ASP.NET Core中集成GraphQL,包括安装必要的NuGet包、创建GraphQL Schema、配置GraphQL服务等步骤。同时,文章还探讨了常见问题及其解决方法,如处理复杂查询、错误处理、性能优化和实现认证授权等,旨在帮助开发者构建灵活且高效的API。
24 3
|
2月前
mcr.microsoft.com/dotnet/core/aspnet:2.1安装libgdiplus
mcr.microsoft.com/dotnet/core/aspnet:2.1安装libgdiplus
33 1
|
2月前
|
开发框架 JavaScript 前端开发
一个适用于 ASP.NET Core 的轻量级插件框架
一个适用于 ASP.NET Core 的轻量级插件框架
|
3月前
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
48 7
|
3月前
|
存储 开发框架 前端开发
ASP.NET MVC 迅速集成 SignalR
ASP.NET MVC 迅速集成 SignalR
75 0
|
4月前
|
开发框架 前端开发 .NET
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
56 0
|
4月前
|
开发框架 前端开发 安全
ASP.NET MVC 如何使用 Form Authentication?
ASP.NET MVC 如何使用 Form Authentication?