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

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

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