(给DotNet加星标,提升.Net技能)
转自:张子阳
cnblogs.com/ZaraNet/p/10212821.html
项目里有上传图片的功能,当然这个功能在项目里是必须要有的,那么目前这个项目是使用完全的前后端分离。
在选择文件上传的组件中还是选择了全面支持Vue的IView,任何上传图片都是通过HTTP请求,服务端从request中读,那么思路有了,直接创建webAPI项目吧。
一般来说,在.NET Core中静态文件应该放到wwwroot,在其中创建一个文件夹。
再做好跨域的东西,一般都是通过cors包。创建控制器,代码如下:
public class IndexController : ControllerBase
{
[HttpPost]
public async Task<bool> InsertPicture([FromServices]IHostingEnvironment environment){
var data = new PicData();
string path = string.Empty;
var files = Request.Form.Files;
if (files == null || files.Count() <= 0) { data.Msg = "请选择上传的文件。"; return false; }
//格式限制
var allowType = new string[] { "image/jpg", "image/png","image/jpeg"};
if (files.Any(c => allowType.Contains(c.ContentType)))
{
if (files.Sum(c => c.Length) <= 1024 * 1024 * 4)
{
foreach (var file in files)
{
string strpath = Path.Combine("Upload", DateTime.Now.ToString("MMddHHmmss") + file.FileName);
path = Path.Combine(environment.WebRootPath, strpath);
using (var stream = new FileStream(path, FileMode.OpenOrCreate, FileAccess.ReadWrite))
{
await file.CopyToAsync(stream);
}
}
data.Msg = "上传成功";
return true;
}
else
{
data.Msg = "图片过大";
return false;
}
}
else
{
data.Msg = "图片格式错误";
return false;
}
}
}
public class PicData
{
public string Msg { get; set; }
}
代码解读:
读取wwwroot是在IHostingEnvironment对象中的,如果不通过依赖注入,就需要直接写成参数,那么file上传的参数开头都应该[FromServices]来修饰,在代码中判断了响应的文件格式、文件大小,通过file.copy就把文件保存在了服务器。
需要跨域:
public void ConfigureServices(IServiceCollection services){
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
services.AddCors(options =>
{
options.AddPolicy("hehe", p => p.AllowAnyMethod()// 允许任何方法 GET,POST,PUT,DELETE, OPTIONS
.AllowAnyHeader() // 允许任何请求头
.AllowAnyOrigin() // 允许任何地址
);
});
}
//This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env){
app.UseStaticFiles(); app.UseCors("hehe");
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseMvc();
}
前台:
<template>
<div>
<Uploadmultipletype="drag"action="http://localhost:54331/api/Index">
<div style="padding: 20px 0">
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff">Icon>
<p>点击或将文件拖拽到这里上传p>
div>
Upload>
div>
template>
<script>export default {
}script>
代码解读::
前台是非常简单的,在main.js中引用Iview,当然这一切的前提都需要Npm一下它.iview的这个组件,action就是你请求的方法,默认呢就是post请求。
那么Iview还有别的属性,详见下方。
效果图:
文末:
后来我们团队考虑到使用七牛这个在线储存图片站点,准备好实名的账号和sdk,获取AccessKey,SecretKey。
登录七牛管理后台->个人信息->秘钥管理
那么官方给我们提供了.NET Core 的版本直接nuget就可以了。
代码:
///
/// 实现将文件上传到七牛云
///
/// 文件流
/// 文件名称
///
public UploadQiNiuResult UploadImgToQiNiu(byte[] stream, string fileName){
Mac mac = new Mac(BlogStatic.QiNiuInfo_AccessKey, BlogStatic.QiNiuInfo_SecretKey);
// 上传策略,参见
// https://developer.qiniu.com/kodo/manual/put-policy
PutPolicy putPolicy = new PutPolicy();
// 如果需要设置为"覆盖"上传(如果云端已有同名文件则覆盖),请使用 SCOPE = "BUCKET:KEY"
// putPolicy.Scope = bucket + ":" + saveKey;
var saveKey = string.Format("BlogImg/{0}/", DateTime.Now.ToString("yyyy/MM/dd")) + fileName;
putPolicy.Scope = "blog:" + saveKey;
// 上传策略有效期(对应于生成的凭证的有效期)
putPolicy.SetExpires();
// 上传到云端多少天后自动删除该文件,如果不设置(即保持默认默认)则不删除
// putPolicy.DeleteAfterDays = 1;
string jstr = putPolicy.ToJsonString();
//获取上传凭证
var uploadToken = Auth.CreateUploadToken(mac, jstr);
UploadManager um = new UploadManager();
HttpResult result = um.UploadData(stream, saveKey, uploadToken);)
{
return JsonConvert.DeserializeObject(result.Text);
}return null;
}
UploadQiNiuResult类
public class UploadQiNiuResult
{
public string Hash { get; set; }
public string Key { get; set; }
}
推荐阅读
(点击标题可跳转阅读)
.NET关于人脸识别引擎分享
部署ASP.NET Core应用到k8s集群
.NET Core WebAPI下Swagger增加导出离线文档功能
看完本文有收获?请转发分享给更多人
关注「DotNet」加星标,提升.Net技能
喜欢就点一下「好看」呗~