使用VUE+iView+.Net Core上传图片的方法示例


Posted in Javascript onJanuary 04, 2019

我们直接进入主题,使用VS2017开发工具

首先要创建一个WebApi项目,创建完之后,在wwwroot文件下,创建一个文件夹 名字可以随意起  我这里呢就叫做Upload了

使用VUE+iView+.Net Core上传图片的方法示例

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的地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery代码优化 事件委托篇
Nov 01 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 Javascript
Node.js assert断言原理与用法分析
Jan 04 #Javascript
如何为vuex实现带参数的 getter和state.commit
Jan 04 #Javascript
原生javascript实现连连看游戏
Jan 03 #Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 #Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 #Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 #Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 #Javascript
You might like
PHP XML备份Mysql数据库
2009/05/27 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
PHP实现添加购物车功能
2017/03/06 PHP
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
c++生成dll使用python调用dll的方法
2014/01/20 Python
零基础学Python(一)Python环境安装
2014/08/20 Python
基于python中的TCP及UDP(详解)
2017/11/06 Python
Python实现快速计算词频功能示例
2018/06/25 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
Keras设置以及获取权重的实现
2020/06/19 Python
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
C#中的验证控件有几种
2014/03/08 面试题
酒店服务实习自我鉴定
2013/09/22 职场文书
入党申请自荐书范文
2014/02/11 职场文书
《挑山工》的教学反思
2014/02/16 职场文书
网站创业计划书
2014/04/30 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
质量整改报告范文
2014/11/08 职场文书
护士自荐信怎么写
2015/03/06 职场文书
导师工作推荐信
2015/03/27 职场文书
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS
Django框架中模型的用法
2022/06/10 Python