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

Asp.Net Core 3.0 学习3、Web Api 文件上传 Ajax请求以及跨域问题

程序员文章站 2022-06-21 19:39:11
1、创建Api项目 我用的是VS2019 Core3.1 。打开Vs2019 创建Asp.Net Core Web应用程序命名CoreWebApi 创建选择API 在Controller文件夹下面添加一个Api控制器 FileUp,修改Api的路由 [Route("api/[controller]/ ......

1、创建api项目

我用的是vs2019 core3.1 。打开vs2019 创建asp.net core web应用程序命名corewebapi 创建选择api 在controller文件夹下面添加一个api控制器 fileup,修改api的路由  [route("api/[controller]/[action]")] 这样就可以访问到具体的某一个了  写一个测试 api

Asp.Net Core 3.0 学习3、Web Api 文件上传 Ajax请求以及跨域问题

using system;
using system.collections.generic;
using system.linq;
using system.threading.tasks;
using microsoft.aspnetcore.http;
using microsoft.aspnetcore.mvc;

namespace corewebapi.controllers
{
    [route("api/[controller]/[action]")]//修改路由
    //[route("api/[controller]")]//默认路由
    [apicontroller]
    public class fileupcontroller : controllerbase
    {
        /// <summary>
        /// 测试接口
        /// </summary>
        /// <returns></returns>
        [httpget]
        //[httpget,route("test")]//默认路由
        
        public string test()
        {
            return "这是测试接口";
        }
    }
}

 

 写api的时候一定要加上,请求方式  post、get 其他的暂时我没用到。默认的路由是被我注释的,修改一下 让他的访问时api / 控制器 / 方法名称。不改也可以,测试的接口就用注释的那个特性。然后运行项目,地址栏输入https://localhost:44376/api/fileup/test 

 

Asp.Net Core 3.0 学习3、Web Api 文件上传 Ajax请求以及跨域问题

2、上传文件接口

在fileup里写一个上传文件的接口所有代码都在下,output是一个输出的类,dto里面是一些参数 应该都有看得懂。里面就是上传文件储存到服务器上 并没有数据库操作,需要的加上去就可以了。

注意:有些会加[consumes("application/json")]//application/json//application/x-www-form-urlencoded 这样来验证媒体类型,这里我弄了好久才想起来我写了这个。因为文件上传怎么说呢,媒体类型肯定不会是json之类的。我以前的api就是在基础api类里加了这个。给我弄了头皮发麻才看到

using system;
using system.collections.generic;
using system.linq;
using system.threading.tasks;
using microsoft.aspnetcore.http;
using microsoft.aspnetcore.mvc;

using corewebapi.models;
using newtonsoft.json;
using microsoft.extensions.hosting;
using system.io;

namespace corewebapi.controllers
{
    [route("api/[controller]/[action]")]//修改路由
    //[route("api/[controller]")]//默认路由
    [apicontroller]
    public class fileupcontroller : controllerbase
    {
        public  ihostingenvironment env;
        public fileupcontroller(ihostingenvironment _env)
        {
            env = _env;
        }
        /// <summary>
        /// 测试接口
        /// </summary>
        /// <returns></returns>
        [httpget]
        //[httpget,route("test")]//默认路由
        
        public string test()
        {
            return "这是测试接口";
        }
        /// <summary>
        /// 文件上传
        /// </summary>
        /// <returns></returns>
        [httppost]
        public async task<output> fileup()
        {
            var ret = new output();
            try
            {
                //不能用frombody
                var dto = jsonconvert.deserializeobject<imagesdto>(request.form["imagemodelinfo"]);//文件类实体参数
                var files = request.form.files;//接收上传的文件,可能多个 看前台
                if (files.count > 0)
                {
                    var path = env.contentrootpath + @"/uploads/images/";//绝对路径
                    string dirpath = path.combine(path, dto.type + "/");//绝对径路 储存文件路径的文件夹
                    if (!directory.exists(dirpath))//查看文件夹是否存在
                        directory.createdirectory(dirpath);
                    var file = files.where(x => true).firstordefault();//只取多文件的一个
                    var filenam = $"{guid.newguid():n}_{file.filename}";//新文件名
                    string snpath = $"{dirpath + filenam}";//储存文件路径
                    using var stream = new filestream(snpath, filemode.create);
                    await file.copytoasync(stream);
                    //次出还可以进行数据库操作 保存到数据库
                    ret = new output { code = 200, msg = "上传成功", success = true };  
                }
                else//没有图片
                {
                    ret = new output { code = 400, msg = "请上传图片", success = false };
                }
            }
            catch (exception ex)
            {
                ret = new output { code = 500, msg = $"异常:{ex.message}", success = false };
            }
            return ret;
        }
    }
}

 

dto与返回的类

 /// <summary>
    /// 返回输出类
    /// </summary>
    public class output
    {
        /// <summary>
        /// 状态码
        /// </summary>
        public int code { get; set; }
        /// <summary>
        /// 消息
        /// </summary>
        public string msg { get; set; }
        /// <summary>
        /// 是否成功
        /// </summary>
        public bool success { get; set; }
        /// <summary>
        /// 返回数据
        /// </summary>
        public object data { get; set; }
    }
/// <summary>
    /// 接收参数dto
    /// </summary>
    public class imagesdto
    {
        /// <summary>
        /// id
        /// </summary>
        public int id { get; set; }
        /// <summary>
        /// 名称
        /// </summary>
        public string name { get; set; }
        /// <summary>
        /// 地址
        /// </summary>
        public string url { get; set; }
        /// <summary>
        /// 备注
        /// </summary>
        public string remark { get; set; }
        /// <summary>
        /// 
        /// </summary>
        public int relationid { get; set; }
        /// <summary>
        /// 类型
        /// </summary>
        public int type { get; set; }
    }

3、前台ajax调用

我在一个mvc程序里面用了个ajax调用  下面是前端代码,contenttype这个资源的类型我转载着坑里好久了,哈哈。

@{
    viewbag.title = "测试";
}

<h2>文件上传测试</h2>
<form enctype="multipart/form-data" id="formdata">
    <div>
        <br /><br /><br />
        文件:<input type="file" id="filesp" name="filesp" /><br /><br />
        名称:<input type="text" id="filename" name="filename" /><br /><br />
        备注:<input type="text" id="txtremake" name="txtremake" /><br /><br />
        relationid:<input type="number" id="txtrelationid" name="txtrelationid" /><br /><br />
        类型:<select id="seltype" name="seltype">
            <option value="1">动物</option>
            <option value="2">植物</option>
            <option value="3">妹子</option>
            <option value="3">风景</option>
            <option value="4">滑稽</option>
            <option value="100">其他</option>
        </select>
        <br /><br />
        <input type="button" id="btnsave" name="btnsave" value="提交" />
    </div>
</form>

<script src="~/scripts/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#btnsave").click(function () {
            var data = new formdata(document.getelementbyid("formdata"));
            //参数
            var parame = json.stringify({ name: $("#filename").val(), remark: $("#txtremake").val(), type: $("#seltype").val(), relationid: $("#txtrelationid").val() });
            data.append("imagemodelinfo", parame);
            $.ajax({
                type: "post",
                url: "https://localhost:44376/api/fileup/fileup",
                datatype: "json",
                data: data,
                async: true,
                contenttype: false,//实体头部用于指示资源的mime类型 media type 。这里要为false
                processdata: false,//processdata 默认为true,当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data
                success: function (data) {
                    console.log(data);
                },
                error: function (data) {
                    console.log("错误" + data);
                }
            });
        });
    });
</script>

 

运行起来看看 测试一下  ,api那边也打好断点。打来浏览器调式就是很熟悉的bug就来了(一天看不到出错仿佛心里不踏实)

Asp.Net Core 3.0 学习3、Web Api 文件上传 Ajax请求以及跨域问题

 

 

 很明显的cors是一个w3c标准,全称是"跨域资源共享"(cross-origin resource sharing)。它允许浏览器向跨源服务器,发出xmlhttprequest请求,从而克服了ajax只能同源使用的限制。所以这里我们就要允许前端来访问,从而就要在api增加跨域;

4、跨域设置

在startup.cs下面的configureservices 中标添加services.addcors(option => option.addpolicy("allowcors", bu => bu.allowanyorigin().allowanymethod().allowanyheader()));

 public void configureservices(iservicecollection services)
        {
            services.addcontrollers();
            //跨域
            services.addcors(option => option.addpolicy("allowcors", bu => bu.allowanyorigin().allowanymethod().allowanyheader()));
        }

 

allowanyorigin  :允许cors请求从任何源来访问,这是不安全的
allowanyheader:允许所有的请求头

allowcredentials :服务端也需要允许证书。
allowanymethod允许跨域策略允许所有的方法:get/post/put/delete 等方法 如果进行限制需要 allowanymethod("get","post") 这样来进行访问方法的限制


在configure中添加中间件app.usecors("allowcors");,集体要限制哪些看个人了

 public void configure(iapplicationbuilder app, iwebhostenvironment env)
        {
            if (env.isdevelopment())
            {
                app.usedeveloperexceptionpage();
            }

            app.usehttpsredirection();

            app.userouting();


            app.useauthorization();

            //跨域
            app.usecors("allowcors");
            app.useendpoints(endpoints =>
            {
                endpoints.mapcontrollers();
            });

        }

 

现在就配置好了在需要跨域的地方加上特性[enablecors("allowcors")]就行了 ,引用命名空间using microsoft.aspnetcore.cors;
    [enablecors("allowcors")]
    [route("api/[controller]/[action]")]//修改路由
    //[route("api/[controller]")]//默认路由
    [apicontroller]
    public class fileupcontroller : controllerbase
    {
        public  ihostingenvironment env;
        public fileupcontroller(ihostingenvironment _env)
        {
            env = _env;
        }
        /// <summary>
        /// 测试接口
        /// </summary>
        /// <returns></returns>
        [httpget]
        //[httpget,route("test")]//默认路由
        
        public string test()
        {
            return "这是测试接口";
        }

 

现在再来调用就解决了

Asp.Net Core 3.0 学习3、Web Api 文件上传 Ajax请求以及跨域问题

 

前台结果看看。文件夹也创建了。

Asp.Net Core 3.0 学习3、Web Api 文件上传 Ajax请求以及跨域问题

5、总结

如果所有api都要跨域的话就建立一个基础的api 让所有的都继承这个api,就需要打赏跨域的标签就可以了;

文件上传还可以用from直接提交这边用list<iformfile>接收,也可以像frombady一样的一个来接收搞,单词 忘了0.0,参数不能fermbody接收,这样文件就没了。

纸上得来终觉浅,觉知这事不写还是不行哈。