使用VUE+iView+.Net Core上传图片
我们直接进入主题,使用VS2017开发工具
首先要创建一个WebApi项目,创建完之后,在wwwroot文件下,创建一个文件夹 名字可以随意起 我这里呢就叫做Upload了
ok ! 然后我们再创建一个控制器 IndexController 代码如下
要知道上传图片都是通过HTTP去请求,服务端从request中读取
public class PicData
{
public string Msg { get; set; }
} [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;
}
}
注意一下这段代码
string strpath = Path.Combine("Upload", DateTime.Now.ToString("MMddHHmmss") + file.FileName);
在wwwroot下创建的文件夹,要将Upload替换成你的文件夹名称
然后这还没有完,还要做跨域,要在Startup.cs文件中去改
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
services.AddCors(options =>
{
options.AddPolicy("hehe", p => p.AllowAnyMethod()// 允许任何方法 GET,POST,PUT,DELETE, OPTIONS
.AllowAnyHeader() // 允许任何请求头
.AllowAnyOrigin() // 允许任何地址
);
});
}
ConfigureServices方法,然后还有Configure方法
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseStaticFiles(); app.UseCors("hehe");
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseMvc();
}
ok完成了,
然后我们就要去创建Vue项目了,
使用npm创建vue项目,vue init webpack file 我们跳过创建过程
使用npm 引用iview 然后在vue项目中的main.js中引用
import iView from 'iview';
import 'iview/dist/styles/iview.css';
import locale from 'iview/dist/locale/en-US'; Vue.use(iView, { locale });
ok,然后我们就在app.vue里面写代码
<template>
<div id="app"> <Upload action="http://localhost:53688/api/Index">
<Button icon="ios-cloud-upload-outline">Upload files</Button>
</Upload> </div>
</template>
action:就是api的地址
使用VUE+iView+.Net Core上传图片的更多相关文章
- .NET压缩图片保存 .NET CORE WebApi Post跨域提交 C# Debug和release判断用法 tofixed方法 四舍五入 (function($){})(jQuery); 使用VUE+iView+.Net Core上传图片
.NET压缩图片保存 需求: 需要将用户后买的图片批量下载打包压缩,并且分不同的文件夹(因:购买了多个用户的图片情况) 文章中用到了一个第三方的类库,Nuget下载 SharpZipLib 目前用 ...
- thinkphp5+vue+iview商城 公众号+小程序更新版本
thinkphp5+vue+iview商城加分销 源码下载地址:http://github.crmeb.net/u/crmeb 演示站后台:http://demo25.crmeb.net 账号:dem ...
- vue & iview
vue & iview ui components https://codepen.io/webgeeker/pen/EJmQxQ https://www.iviewui.com/docs/g ...
- JS(vue iview)分页解决方案
JS(vue iview)分页解决方案 一.解决思路 使用分页组件 使用组件API使组件自动生成页面数量 调用组件on-change事件的返回值page 将交互获得的数组存在一个数组list中 通过p ...
- Vue + iview框架,搭建项目遇到的相关问题记录 - 国际化router.js不能实现
例子展示: 概述: 最近在使用vue + iview框架进行web开发,并且有一个需求,需要实现web端的国际化,在完成相关配置文件后,发现router.js 中无法配置,并且会出现异常,在经过百度找 ...
- 【vue iview】项目 win10 放在C盘 经常npm install不成功,就是因为 权限问题,把代码目录放到D盘就没事了。
[vue iview]项目 win10 放在C盘 经常npm install不成功,就是因为 权限问题,把代码目录放到D盘就没事了.
- vue iview render里面 没有双向绑定 renderHeader 要序列化 反序列 一下
vue iview render里面 没有双向绑定 renderHeader 要序列化 反序列 一下 renderHeader: (h, params) => { return [ h('Rad ...
- vue+iview 通过a标签实现文件下载
vue+iview 通过a标签实现文件下载 方法一: 注意: 如果下载的文件放在本地目录下,一定要将模板文件放到 public 目录下,否则由于权限问题找不到文件 路径: 项目更目录-->pub ...
- Vue+Iview+Node 登录demo
1.相关组件安装 axios iview js-cookie crypto-js 2.子父组件传值.监听窗体大小改变.记住密码 .自定义组件(事件 .props) created:实例已经创建完 ...
随机推荐
- [asp.net入门]利用ADO.NET处理数据的简单之处
由于项目需要,要往数据库中导入一些历史数据,而这些历史数据都是线下人工记录的,所以有很多不规范的地方,比如:同一个公司的名称在不同的记录中可能相差那么几个字,而且每条数据不是每个字段都是完整的,等等诸 ...
- 请教如何改善C#中socket通信机客户端程序的健壮性
我是做Socket的新手,最近做了一个Socket客户端程序,连接Server的时候,如果server存在,并且允许连接的话,程序无错,正常执行:但是如果Server不存在,或者拒绝连接,程序就会卡住 ...
- mysql数据库查询优化
上两周一直想办法提高查询速度,取得一点效果,解决了部分问题,记下来以便将来自己查看. 由于公司没有专门的DBA,我自己对mysql数据库也不是很熟悉,而且这个JAVA开发的网络审计系统的管理系统,是经 ...
- 项目加入 TFS报错
新建一个项目,然后在解决方案上右击,选择Add solution to source control的时候,总是失败,output窗口中出现的错误信息如下: An error was raised ...
- java基础-四大特征
- 大型开放式网络课程MOOC的一点体会
2012年,美国的顶尖大学陆续设立网络学习平台,在网上提供免费课程,Coursera.Udacity.edX三大课程提供商的兴起.给很多其它学生提供了系统学习的可能.这就是大型开放式网 ...
- ORACLE关于锁表查询的部分SQL
http://www.cnblogs.com/quanweiru/archive/2012/08/28/2660700.html --查询表空间名称和大小 SELECT UPPER (F.TABLES ...
- JavaScript 之 uploadify 或 SWFUpload上传问题
1.uploadify 或 SWFUpload在Chrome.Firefox浏览器下session找不到的问题 问题如下:为了安全起见,程序开发中往往通过Session设置权限控制,只有登录用户才能进 ...
- spring boot 环境搭建
1.开发工具 https://spring.io/tools/sts/all 2.demo https://start.spring.io 3.下载maven https://maven.apache ...
- Oracle 11g 更改字符集
查看字符集: select * from v$nls_parameters where parameter = 'NLS_CHARACTERSET'; 修改字符集: sqlplus "/as ...