使用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 相关文章推荐
Javascript打印网页部分内容的脚本
Nov 17 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
node.js中的fs.stat方法使用说明
Dec 16 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 Javascript
详解js类型判断
May 22 Javascript
简述JS浏览器的三种弹窗
Jul 15 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 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制作静态网站的模板框架(二)
2006/10/09 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
jQuery.deferred对象使用详解
2016/03/18 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
win7安装python生成随机数代码分享
2013/12/27 Python
Python探索之自定义实现线程池
2017/10/27 Python
python K近邻算法的kd树实现
2018/09/06 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
机关办公室岗位职责
2014/04/16 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
法人委托书范本
2014/09/15 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
实习报告范文
2019/07/30 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
python opencv旋转图片的使用方法
2021/06/04 Python