欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用VUE+iView+.Net Core上传图片

程序员文章站 2022-04-28 13:09:39
我们直接进入主题,使用VS2017开发工具 首先要创建一个WebApi项目,创建完之后,在wwwroot文件下,创建一个文件夹 名字可以随意起 我这里呢就叫做Upload了 ok ! 然后我们再创建一个控制器 IndexController 代码如下 要知道上传图片都是通过HTTP去请求,服务端从r ......

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