怎么在VUE中使用iView+.Net Core实现上传图片

怎么在VUE中使用iView+.Net Core实现上传图片？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

首先要创建一个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>

看完上述内容，你们掌握怎么在VUE中使用iView+.Net Core实现上传图片的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！