使用VUE+iView+.Net Core上传图片
程序员文章站
2022-04-28 13:09:39
我们直接进入主题,使用VS2017开发工具 首先要创建一个WebApi项目,创建完之后,在wwwroot文件下,创建一个文件夹 名字可以随意起 我这里呢就叫做Upload了 ok ! 然后我们再创建一个控制器 IndexController 代码如下 要知道上传图片都是通过HTTP去请求,服务端从r ......
我们直接进入主题,使用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() <= 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; } }
注意一下这段代码
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的地址