使用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表格内容过滤的实现方法
Jul 05 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
JavaScript Uploadify文件上传实例
Feb 28 Javascript
JavaScript中附件预览功能实现详解(推荐)
Aug 15 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 Javascript
Vue通过provide inject实现组件通信
Sep 03 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
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
火车头采集器3.0采集图文教程
2007/03/17 PHP
生成卡号php代码
2008/04/09 PHP
PHP文件与目录操作示例
2016/12/24 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
javascript中创建对象的三种常用方法
2010/12/30 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
pyqt5自定义信号实例解析
2018/01/31 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
Python类型转换的魔术方法详解
2020/12/23 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
接口可以包含哪些成员
2012/09/30 面试题
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
日语专业求职信
2014/07/04 职场文书
国王的演讲观后感
2015/06/03 职场文书
公司开业致辞
2015/07/29 职场文书
合同补充协议书
2016/03/24 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
Python使用openpyxl模块处理Excel文件
2022/06/05 Python
使用Apache Camel表达REST服务的方法
2022/06/10 Servers