使用.Net Core+IView+Vue集成上传图片功能
最近的项目里有上传图片的功能,当然这个功能在项目里是必须要有的,那么目前这个项目是使用完全的前后端分离,在选择文件上传的组件中还是选择了全面支持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() <= ) { 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) <= * * )
{
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>
<Upload
multiple
type="drag"
action="http://localhost:54331/api/Index">
<div style="padding: 20px 0">
<Icon type="ios-cloud-upload" size="" style="color: #3399ff"></Icon>
<p>点击或将文件拖拽到这里上传</p>
</div>
</Upload>
</div>
</template>
<script>
export default { }
</script>
代码解读::
前台是非常简单的,在main.js中引用Iview,当然这一切的前提都需要Npm一下它.iview的这个组件,action就是你请求的方法,默认呢就是post请求。那么Iview还有别的属性,详见下方。
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
action | 上传的地址,必填 | String | - |
headers | 设置上传的请求头部 | Object | {} |
multiple | 是否支持多选文件 | Boolean | false |
data | 上传时附带的额外参数 | Object | - |
name | 上传的文件字段名 | String | file |
with-credentials | 支持发送 cookie 凭证信息 | Boolean | false |
show-upload-list | 是否显示已上传文件列表 | Boolean | true |
type | 上传控件的类型,可选值为 select (点击选择),drag (支持拖拽) |
String | select |
accept | 接受上传的文件类型 | String | - |
format | 支持的文件类型,与 accept 不同的是,format 是识别文件的后缀名,accept 为 input 标签原生的 accept 属性,会在选择文件时过滤,可以两者结合使用 | Array | [] |
max-size | 文件大小限制,单位 kb | Number | - |
效果图:
文末:
后来我们团队考虑到使用七牛这个在线储存图片站点,准备好实名的账号和sdk,获取AccessKey,SecretKey。登录七牛管理后台->个人信息->秘钥管理
那么官方给我们提供了.net core 的版本直接nuget就可以了。
代码:
/// <summary>
/// 实现将文件上传到七牛云
/// </summary>
/// <param name="stream">文件流</param>
/// <param name="fileName">文件名称</param>
/// <returns></returns>
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<UploadQiNiuResult>(result.Text);
}
return null;
}
UploadQiNiuResult类
public class UploadQiNiuResult
{
public string Hash { get; set; }
public string Key { get; set; }
}
使用.Net Core+IView+Vue集成上传图片功能的更多相关文章
- 中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架(asp.net core 2.X+Vue)模板项目学习之路(一) C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明 如何在IIS上发布,并能正常访问
中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...
- Vue实现上传图片功能
前言: 用vue实现上传图片功能,效果图如下: 先说文件上传控件样式美化怎么做,我有两种方法. 1.先上代码 html部分: <div class="pics-wrapper" ...
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件(或 关闭停止与系统交互的可执行文件) ajaxfileupload插件上传图片功能,用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字, C# WinForm 中英文实现, 国际化实现的简单方法 ASP.NET Core 2 学习笔记(六)ASP.NET Core 2 学习笔记(三)
sql server 关于表中只增标识问题 由于我们系统时间用的过长,数据量大,设计是采用自增ID 我们插入数据的时候把ID也写进去,我们可以采用 关闭和开启自增标识 没有关闭的时候 ,提示一下错 ...
- vue集成ueditor
相关代码见github 1.引入ueditor相关的文件,具体目录见下图如下 我将下载的文件放在static下面,这里专门用来放置相关的静态文件 (在ueditor.config.js需要配置一下路径 ...
- NET Core 与 Vue.js 服务端渲染
NET Core 与 Vue.js 服务端渲染 http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/原作者: ...
- JAVA 上传图片功能
前后端实现上传图片功能(JAVA代码) 1.前端大概 请求头必须为AJAX请求头: 'X-Requested-With': 'XMLHttpRequest' 一般是指网页中存在的Content-Typ ...
- [翻译] ASP.NET Core 3.0 的新增功能
ASP.NET Core 3.0 的新增功能 全文翻译自微软官方文档英文版 What's new in ASP.NET Core 3.0 本文重点介绍了 ASP.NET Core 3.0 中最重要的更 ...
- vue集成cesium,webgis平台第一步(附源码下载)
vue-cesium-platform Vue结合Cesium的web端gis平台 初步效果 笔记本性能限制,运行Cesium温度飙到70度以上.所以平时开发时先开发界面,之后加载Cesium地球 当 ...
- SpreadJS与Vue集成,苏宁集团『极客办公』系统开发案例
“造极”如今已成为苏宁集团的年度核心关键词.“造极”在具体工作上的体现,代表着苏宁不断追求极致的工匠精神,即对待每一个环节,都要严格要求.精益求精.“极客办公”系统,正是在这种环境下应运而生.本期公开 ...
随机推荐
- BZOJ_3196_Tyvj 1730 二逼平衡树_树状数组套主席树
BZOJ_3196_Tyvj 1730 二逼平衡树_树状数组套主席树 Description 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作: 1.查询k在区间内的排 ...
- Linux vim常用命令
什么是 vim? Vim是从 vi 发展出来的一个文本编辑器.代码补完.编译及错误跳转等方便编程的功能特别丰富,在程序员中被广泛使用. 简单的来说, vi 是老式的字处理器,不过功能已经很齐全了,但是 ...
- python 之 初识模块
什么是模块 什么是模块 一个.py文件 就是一个模块 我们使用import加载的模块分为4个通用类别 1.py文件 2.包好一组模块的包(带__init__.py文件的文件夹) 3.内置模块 4.已被 ...
- Scala 枚举介绍及深入应用
本文详细地总结了Scala枚举的几种实现方式,对我们更好地进行函数式编程有很好地指导和帮助. Scala 枚举示例和特性 枚举(Enumerations)是一种语言特性,对于建模有限的实体集来说特别有 ...
- Akka实践一些总结
最近在一些服务中使用了akka,主要用来做异步解耦和本地消息分发(路由),这里简单总结一下用法. 与spring集成 网上有不少集成的例子,要使用到spring的扩展. 我这边没有这样处理,而是简单把 ...
- 浅析vue2.0的diff算法
一.前言 如果不了解virtual dom,要理解diff的过程是比较困难的. 虚拟dom对应的是真实dom, 使用document.CreateElement 和 document.CreateTe ...
- asp.net core系列 53 IdentityServer4 (IS4)介绍
一.概述 在物理层之间相互通信必须保护资源,需要实现身份验证和授权,通常针对同一个用户存储.对于资源安全设计包括二个部分,一个是认证,一个是API访问. 1 认证 认证是指:应用程序需要知道当前用户的 ...
- 《前端之路》之 JavaScript 进阶技巧之高阶函数(下)
目录 第二章 - 03: 前端 进阶技巧之高阶函数 一.防篡改对象 1-1:Configurable 和 Writable 1-2:Enumerable 1-3:get .set 2-1:不可扩展对象 ...
- [深度应用]·实战掌握Dlib人脸识别开发教程
[深度应用]·实战掌握Dlib人脸识别开发教程 个人网站--> http://www.yansongsong.cn/ 项目GitHub地址--> https://github.com/xi ...
- C#净化版WebApi框架
前言 我们都知道WebApi是依赖于Asp.Net MVC的HttpRouteCollection进行路由 . 但WebApi和MVC之间是没有依赖关系的, WebApi的基类ApiControlle ...