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

2024-12-14 00:27:49

我们直接进入主题，使用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的地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

使用vue构建一个上传图片表单

这篇博客也不知道起个什么名字比较好,毕竟刚开始学习vue,很多还不是很熟悉,一直在慢慢摸索中:之前也习惯了用jQuery写js代码,思维逻辑也要有个转换的过程. 1. 转变思维使用vue编写代码,首先要做的就是转换思维,vue是一个数据驱动的框架,我们只需要操作数据,数据变化后,vue会自动改变DOM结构,而jQuery是直接操作DOM的.比如刚开始写的代码中犯的错误,有一个页面中的input标签是并列多个的,而且name属性的值是自增的,那么我就用v-for循环下,把index填充进去就行了
vue实现的上传图片到数据库并显示到页面功能示例

本文实例讲述了vue实现的上传图片到数据库并显示到页面功能.分享给大家供大家参考,具体如下: 1.点击上传图片,弹出选择图片选项框. 页面代码: <div class="form-signin-heading" id="btnUpload" @change="upload">上传图片</div> <input type="file" name="avatar" id="
基于VUE选择上传图片并页面显示（图片可删除）

基于VUE选择上传图片并在页面显示,图片可删除,具体内容如下 demo例子: 依赖文件:jqueryform HTML文本内容: <template> <div id="accident"> <div class="wrapper"> <i class="icon-pic"></i>相关照片 <button type="button" @click="
vue.js 上传图片实例代码

最近爱上了用vue.js做前端,昨天用vue上传图片时遇到了问题,最后半天时间终于摸索出来,我将相关部分的代码贴出来. 前端部分 <div class="form-group"> <label>背景图</label> <input type="file" class="form-control" @change="onFileChange"> </div> <d
vue项目中使用axios上传图片等文件操作

axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求支持 Promise API 拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止 CSRF/XSRF 首先安装axios: 1.利用npm安装npm install axios –save 2.利用bower安装bower install axios
Vue.js上传图片到阿里云OSS存储的方法示例

如何在VueJS使用阿里云存储上传图片? 什么是OSS呢? 其实按照官网的解释就是->>阿里云对象存储服务(Object Storage Service) 在实际开发中,公司可能会用到OSS随时来存储一些数据,比如像文本.图片.音频和视频等在内的各种非结构化数据文件,恰好,在做项目的时候,刚好用到了OSS存储,对于我这个萌新,从来没用过,那么我们先来看看文档,看看是怎么一回事~看看前端在VueJS的环境下是如何上传OSS的 (1)首先,打开官网-----https://www.aliyun.c
vue上传图片组件编写代码

本文实例教大家如何编写一个vue上传图片组件,具体如下 1.首先得有一个[type=file]文件标签并且隐藏,changge事件来获取图片: <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/> 2.触发隐藏的文件标签:(通过原生的click来触发) document.ge
vue axios 表单提交上传图片的实例

项目中用的element 的框架,然后在项目有一个添加数据需求是图片可上传,也可不上传, 然后问题就是element 中的上传控件在没有图片的时候是不会触发提交的,但接口写的是有file的 multipart/form-data 接收模式所有只能自己另个模仿一个表单上传 <input class="file" name="file" type="file" accept="image/png,image/gif,imag
vue中el-upload上传图片到七牛的示例代码

一.思路,从后台获取七牛token,上传图片到七牛,获取返回图片路径放入el-upload. 二.代码. <el-input v-model="listVideoQuery.orgLogo" @change="orgLogoChange"></el-input> <el-col :span="10" class="mt10"> <el-upload class="upload
使用VUE+iView+.Net Core上传图片的方法示例

我们直接进入主题,使用VS2017开发工具首先要创建一个WebApi项目,创建完之后,在wwwroot文件下,创建一个文件夹名字可以随意起我这里呢就叫做Upload了 ok ! 然后我们再创建一个控制器 IndexController 代码如下要知道上传图片都是通过HTTP去请求,服务端从request中读取 public class PicData { public string Msg { get; set; } } [HttpPost] public async Task<boo
Vue CLI3 如何支持less的方法示例

本文介绍了Vue CLI3 如何支持less的方法示例,分享给大家,具体如下: 安装方式: npm install less less-loader --save 或者 cnpm install less less-loader --save 大家在编写 .vue 文件的 style 的时候多会选择采用预编译样式来加速开发效率 <style lang="less"> #app { font-family: 'Avenir', Helvetica, Arial, sans-s
Vue自动构建发布脚本的方法示例

简介使用cross-env, scp2两个插件完成 cross-env cross-env这是一款运行跨平台设置和使用环境变量的脚本. 为什么需要cross-env? NODE_ENV=production 像这样设置环境变量时,大多数Windows命令提示符都会阻塞 .(Windows上的Bash是例外,它使用本机Bash.)同样,Windows和POSIX命令使用环境变量的方式也有所不同.对于POSIX,您可以使用: $ENV_VAR 和在Windows上可以使用 %ENV_VAR% .
vue中的使用token的方法示例

初始于登录页面 Home.vue <template> <div class="home"> </div> </template> <script> // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' import axios from 'axios'; export default { name: 'home', comp
vue iview封装模态框的方法

本文实例为大家分享了vue iview封装模态框的具体代码,供大家参考,具体内容如下子组件 <template> <Modal :value="isShowModal" :width="width" :title="title" @on-visible-change="getFaultModalStatusChange" > <slot name=
vue+iview 实现可编辑表格的示例代码

先简单说明一下,这个Demo引入的vue,iview的方式是标签引入的,没有用到webpack之类的构建工具... 毕竟公司还在用angularjs+jq. 这也是我第一次写文章,大家看看思路就行了,要是有大佬指点指点就更好了话不多说,先来个效果图我们再看下极为简单的目录结构 IViewEditTable ## vue+iview 实现的可编辑表格 └── index.html ## 首页 └── js └── editTable.js ## 首页JS └── ivew ## iview相关
vue.js使用3DES加密的方法示例

本文实例讲述了vue.js使用3DES加密的方法.分享给大家供大家参考,具体如下: 如何在VUE-CLI手脚架建立的工程中使用3des加密: npm install crypto-js --save-dev import CryptoJS from 'crypto-js' //DES加密 Pkcs7填充方式 encryptByDES(message, key){ const keyHex = CryptoJS.enc.Utf8.parse(key); const encrypted = Cryp
vue+iview写个弹框的示例代码

iView 是一套基于Vue.js的开源UI组件库,主要服务于PC界面的中后台产品. 1.iView的特性 1) 高质量.功能丰富 2) 友好的API ,自由灵活地使用空间 3) 细致.漂亮的 UI 4) 事无巨细的文档 5) 可自定义主题 2.iView的安装: 1) 使用npm: npm install --save iview 2) CDN引入: <link rel="stylesheet" href="css/iview.css" rel="
vue计算属性computed的使用方法示例

本文实例讲述了vue计算属性computed的使用方法.分享给大家供大家参考,具体如下: computed:{ b:function(){ //默认调用get return 值 } } computed:{ b:{ get: set: } } * computed里面可以放置一些业务逻辑代码,一定记得return <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&
vue中动态select的使用方法示例

本文实例讲述了vue中动态select的使用方法.分享给大家供大家参考,具体如下: html代码如下: 通过v-model可以获取到选中的值,如果没值就默认第一个;如果有值就显示有值的那个内容 <template> <div class="violationsList"> <div class="type-select"> <select name="selected" id="" v

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

相关推荐

随机推荐