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>
ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64)的更多相关文章
- 七牛图片上传JSSDK
BASE64图片上传 接口说明: POST /putb64/<Fsize>/key/<EncodedKey>/mimeType/<EncodedMimeType>/ ...
- .Net Core 图片上传FormData和Base64
缓冲和流式传输是上传文件的两种常用方案,这里主要演示流式传输. 1.Net Core MVC Form提交方式: 前端页面 form表单提交: <form id="uploadForm ...
- angular封装七牛云图片上传,解决同一页面多个上传按钮分别上传
step1:引入文件 引入Plupload *该SDK上传功能集于Plupload插件封装,所以需要下载Plupload; plupload.dev.js 引入qiniu.js为了简便,当时直接从官网 ...
- 图床工具PicGO实现七牛云图片上传
图床工具PicGO实现七牛云图片上传 我们在写博客或者网络文章时经常需要上传图片.目前最有名气的图床工具就是PicGO. 简单的界面,完整的功能,在相册里也能直接复制markdown图片链接.一直深受 ...
- ASP.NET Core WEB API 使用element-ui文件上传组件el-upload执行手动文件文件,并在文件上传后清空文件
前言: 从开始学习Vue到使用element-ui-admin已经有将近快两年的时间了,在之前的开发中使用element-ui上传组件el-upload都是直接使用文件选取后立即选择上传,今天刚好做了 ...
- 一个简单的安卓+Servlet图片上传例子
例子比较 简单,服务端为Java Web Servlet,doPost方法中接收图片并保存,然后将保存的图片名返回给客户端,关键代码: @SuppressWarnings("deprecat ...
- Asp.net中FileUpload控件实现图片上传并带预览显示
单一图片上传——“选择”+“上传”,.NET默认模式: 1.实现原理: 采用FileUpload控件默认的使用方式,先由“选择”按钮选择图片,然后单击“上传”按钮完成上传,并可在“上传”按钮的 ...
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(七)图片上传功能
日常啰嗦 前一篇文章<Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合>讲了富文本编辑器UEditor的整合与使用 ...
- 项目回顾3-再谈图片上传-FormData+ajax上传
上次在纠结图片上传用base64还是form表单,现在感觉好蠢,因为又开辟了第三条道路. 其实也根本用不到form 只需要一个上传文件的input就好了 <input id="file ...
随机推荐
- windows注册表解析说明
https://www.cnblogs.com/wfq9330/p/9176654.html
- SpringBoot中常用注解@Controller/@RestController/@RequestMapping的区别
@Controller 处理http请求 @Controller //@ResponseBody public class HelloController { @RequestMapping(valu ...
- maven pom文件
setting.xml主要用于配置maven的运行环境等一系列通用的属性,是全局级别的配置文件:而pom.xml主要描述了项目的maven坐标,依赖关系,开发者需要遵循的规则,缺陷管理系统,组织和li ...
- leetcode739
class Solution(object): def dailyTemperatures(self, T: 'List[int]') -> 'List[int]': S = list() n ...
- Ubuntu输入命令无效的问题
https://blog.csdn.net/u014797226/article/details/80800550?utm_source=blogxgwz2 Ubuntu启动时输入密码后,一直停留在登 ...
- h5-audio/video标签
音频/视频 基础用法 属性 事件 audio元素和video元素 <audio id="audio" src="./成都.mp3"></aud ...
- DJango 基础(6)
Django模型基础 知识点: 数据库的配置 使用django中的模型 将模型映射到数据库 数据的增删改查基本操作 数据库的配置 1.在settings.py中配置DATABASES: DATABAS ...
- 十五、Facade 窗口设计模式
需求:让复杂的事务看起来简单 原理: 代码清单: DataBase: public class DataBase { private DataBase(){} public static Proper ...
- VueJs相关命令
参考: https://www.jianshu.com/p/1626b8643676 安装axios $ npm install axios 如何打包 基于Vue-Cli,通过npm run ...
- NodeJs学习相关网址
node官方中文 https://nodejs.org/zh-cn/ Node.js 中文网 https://nodejs.org/zh-cn/ Node.js 教程 | 菜鸟教程 http: ...