C# WebApi 同时上传多个图片和字段示例

2021-05-08  乐帮网

webapi

下面我来介绍在C#的WebApi中如何同时上传多个文件,并且把源码上传到了百度网盘可直接下载运行,开发环境:Framework4.6.1   Microsoft.AspNet.WebApi  version=5.2.7
开发工具: visual studio 2019

(1)在Visual Studio 中新建一个Web项目,使用MVC模板同时把右侧的启用WebApi选项给勾选上。如下图:

project

(2)修改主页前端文件Views/Home/Index.cshtml  代码如下:

<form name="form1" method="post" enctype="multipart/form-data" action="@Url.Content("~/api/upload")">
    <div class="form-group">
        <label for="caption">Image Caption</label>
        <input name="caption" class="form-control" type="text" />
    </div>
    <div class="form-group">
        <label for="image1">Image File1</label>
        <input name="image1" class="form-control" type="file" />
    </div>
    <div class="form-group">
        <label for="image1">Image File2</label>
        <input name="image1" class="form-control" type="file" />
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

(3)新建一个文件夹放置WebApi接口类,添加文件/Api/UploadController.cs,内容如下:

 public async Task<HttpResponseMessage> PostFormData()
        {
            // Check if the request contains multipart/form-data.
            if (!Request.Content.IsMimeMultipartContent())
            {
                throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
            }

            string root = HttpContext.Current.Server.MapPath("~/App_Data");
            var provider = new MultipartFormDataStreamProvider(root);

            try
            {
                // Read the form data.
                await Request.Content.ReadAsMultipartAsync(provider);

                // This illustrates how to get the file names.
                foreach (MultipartFileData file in provider.FileData)
                {
                    string name1 = file.Headers.ContentDisposition.FileName;
                    string name2 = file.LocalFileName;

                }
                foreach (var key in provider.FormData.AllKeys)
                {
                    string keyStr = key;
                    string val = provider.FormData[key];
                }
                return Request.CreateResponse(HttpStatusCode.OK);
            }
            catch (System.Exception e)
            {
                return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e);
            }
        }

(4)点击 Visual Studio上运行按钮 IIS Express ,这样程序 就开始运行了,界面如下:

pages

其中输入框内可输入值传到后端,在Image File1和Image File2中分别选择文件最后点击 Submit提交,文件最终保存在App_Data文件夹下。

示例主要参考微软官方文档:https://docs.microsoft.com/zh-cn/aspnet/web-api/overview/advanced/sending-html-form-data-part-2

我把源码放到了百度网盘:链接:https://pan.baidu.com/s/1xGeUVuj9mXDyFCipWCfQZA 

 

 

公众号二维码

关注我的微信公众号
在公众号里留言交流
投稿邮箱:1052839972@qq.com

庭院深深深几许?杨柳堆烟,帘幕无重数。
玉勒雕鞍游冶处,楼高不见章台路。
雨横风狂三月暮。门掩黄昏,无计留春住。
泪眼问花花不语,乱红飞过秋千去。

欧阳修

付款二维码

如果感觉对您有帮助
欢迎向作者提供捐赠
这将是创作的最大动力