使用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 相关文章推荐
onpropertypchange
Jul 01 Javascript
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
悬浮数字的实现案例
Feb 19 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
JavaScript设计模式之策略模式实现原理详解
May 29 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
做一个有下拉功能的留言版
2006/10/09 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
javascript 简练的几个函数
2009/08/29 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
python3对接mysql数据库实例详解
2019/04/30 Python
使用python实现滑动验证码功能
2019/08/05 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
几款好用的python工具库(小结)
2020/10/20 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
优秀实习自我鉴定
2013/12/04 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
跳高加油稿
2015/07/21 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
解析Java中的static关键字
2021/06/14 Java/Android
基于Python实现将列表数据生成折线图
2022/03/23 Python