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

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

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