使用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的地址