.NET使用HttpClient以multipart/form-data形式post上传文件及其相关参数

简介: .NET使用HttpClient以multipart/form-data形式post上传文件及其相关参数

前言:

  本次要讲的是使用.Net HttpClient拼接multipark/form-data形式post上传文件和相关参数,并接收到上传文件成功后返回过来的结果(图片地址,和是否成功)。可能有很多人会说用ajax不是就可以轻松的实现吗?的确是在不存在跨域问题的前提下使用ajax上传文件,接收返回结果是最佳的选择。无奈的是我们对接的是第三方的一个上传图片的接口,而且对方并没有对我们的域名设置允许跨域,为了能够解决这一问题我们只能够通过后端请求避免跨域问题。

什么是multipart/form-data请求:

关于multipart/form-data详情查看: https://www.cnblogs.com/tylerdonet/p/5722858.html

Html上传图片按钮:

<div class="cover-hd">
<a href="javascript:;" class="a-uploadCustom">
<input type="file" id="Logoimg" onchange="OnchangeImage(this)" /></a>
</div>

使用ajax将图片文件流和相关参数传递到后端进行拼接:

注意:因为我这里调用第三方接口需要传递(appid应用程序唯一标识,random随机数,和sign签名)

<script type="text/javascript">
    //后端图片上传
    function OnchangeImage(obj) {
        var formData = new FormData();
        var files = $(obj).prop('files'); //获取到文件列表
        console.log(files[0]);
        formData.append("imgType", 1);
        formData.append("appId","你需要传递的参数");
        formData.append("random", "你需要传递的参数");
        formData.append("file", files[0]);//图片文件流
        formData.append("sign", "你需要传递的参数");
        console.log(formData);
        jQuery.support.cors = true;
        $.ajax({
            async: true,
            contentType: false, //头部请求内容格式
            dataType: 'json',
            type: 'post',
            data:formData,
            // 告诉jQuery不要去处理发送的数据
            processData: false,
            url: "@Url.Action("ImageUpload", "MtVirtualStore")",//后端接收图片接口
            success: function(data) {
                //后端Httpclient请求成功后返回过来的结果
                console.log(data);
            }
        });
    }
</script>

后端接收图片和参数,并将图片文件流转化为图片字节类型数据:

//接收前端图片文件信息
[HttpPost]
public JsonResult ImageUpload(FormContext context)
{
HttpPostedFileBase fileData = Request.Files[0];
string appId=Request["appId"];
string random=Request["random"];
string sign=Request["sign"];
string imgType=Request["imgType"];
if (fileData != null)
{
try{
string fileName = Path.GetFileName(fileData.FileName);//原始文件名称
byte[] byteFileData = ReadFileBytes(fileData);//文件流转为字节流
var resultContext =HttpClientPostUpload(byteFileData,appId,random,sign,imgType, fileName);
return Json(new { code = 1, list = resultContext,msg="上传成功~"});
}
catch (Exception ex)
{
return Json(new { code = 0, msg = ex.Message });
}
}
else
{
return Json(new { code = 0, msg = "图片上传失败,请稍后再试~" });
}
}
//文件流转化为字节
/// <summary>
/// 文件流类型转化字节类型
/// </summary>
/// <param name="fileData">文件流数据</param>
/// <returns></returns>
private byte[] ReadFileBytes(HttpPostedFileBase fileData)
{
byte[] data;
using (Stream inputStream = fileData.InputStream)
{
MemoryStream memoryStream = inputStream as MemoryStream;
if (memoryStream == null)
{
memoryStream = new MemoryStream();
inputStream.CopyTo(memoryStream);
}
data = memoryStream.ToArray();
}
return data;
}

重点,HttpClient拼接multipart/form-data形式参数post提交数据:

/// <summary>
/// 向目标地址提交图片文件参数数据
/// </summary>
/// <param name="bmpBytes">图片字节流</param>
/// <param name="appId">appid</param>
/// <param name="random">随机数</param> 
/// <param name="sign">签名</param>
/// <param name="imgType">上传图片类型</param>     
/// <param name="fileName">图片名称</param>
/// <returns></returns>
public string HttpClientPostUpload(byte [] bmpBytes, string appId, string random,string sign,string imgType,string fileName)
{
using (var client = new HttpClient())
{
List<ByteArrayContent> list = new List<ByteArrayContent>();
var dataContent = new ByteArrayContent(Encoding.UTF8.GetBytes(appId));
dataContent.Headers.ContentDisposition = new ContentDispositionHeaderValue("form-data")//内容处置标头
{
Name = "appId"
};
list.Add(dataContent);
var dataContent2 = new ByteArrayContent(Encoding.UTF8.GetBytes(imgType));
dataContent2.Headers.ContentDisposition = new ContentDispositionHeaderValue("form-data")
{
Name = "imgType"
};
list.Add(dataContent2);
var dataContent3 = new ByteArrayContent(Encoding.UTF8.GetBytes(random));
dataContent3.Headers.ContentDisposition = new ContentDispositionHeaderValue("form-data")
{
Name = "random"
};
list.Add(dataContent3);
var dataContent4 = new ByteArrayContent(Encoding.UTF8.GetBytes(sign));
dataContent4.Headers.ContentDisposition = new ContentDispositionHeaderValue("form-data")
{
Name = "sign"
};
list.Add(dataContent4);var fileContent = new ByteArrayContent(bmpBytes);//填充图片字节
fileContent.Headers.ContentDisposition = new ContentDispositionHeaderValue("form-data")
{
Name="file",
FileName=fileName
};
list.Add(fileContent);
using (var content =new MultipartFormDataContent())
{
Action<List<ByteArrayContent>> act = (dataContents) =>
{//声明一个委托,该委托的作用就是将ByteArrayContent集合加入到MultipartFormDataContent中
foreach (var byteArrayContent in dataContents)
{
content.Add(byteArrayContent);
}
};
act(list);//执行act
try
{
var result = client.PostAsync("https://xxxxxx.com/imageUpload/", content).Result;//post请求
return result.Content.ReadAsStringAsync().Result;
}
catch (Exception ex)
{
return ex.Message;
}
}
}
}

使用Fiddler 4 抓包查看请求的参数:

因为我们没有办法看到我们所拼接成功后的multipark/form-data形式的数据,想要看到对应拼接的请求参数可以使用 Fiddler 4 抓包工具查看:

关于Fiddler 4抓包工具的使用可以阅读该篇博客:https://www.jianshu.com/p/55f7be58a7e4

抓包获取到的multipark/form-data形式的请求参数如下图:

1336199-20190829004834280-1822340891.png

总结:

  写到最后才发现,原本只需要一个简单的请求就可以解决的问题因为跨域把这个问题变得如此繁琐,搞得真叫人蛋痛。这里我试过了很多种方式拼接multipark/form-data形式的请求参数,最后在坚持不懈的尝试下终于成功了。

相关文章
|
7月前
|
网络安全
Caused by: org.springframework.web.client.ResourceAccessException: I/O error on POST request for "http://xxxx.svc.cluster.local:8080/xxxx": Connection reset; nested exception is java.net.SocketException: Connection reset 什么原因导致得
Caused by: org.springframework.web.client.ResourceAccessException: I/O error on POST request for "xxxx.svc.cluster.local:8080/xxxx ": Connection reset; nested exception is java.net.SocketException: Connection reset 什么原因导致得
908 0
|
2月前
|
机器学习/深度学习 存储 编解码
多任务学习新篇章 | EMA-Net利用Cross-Task Affinity实现参数高效的高性能预测
多任务学习新篇章 | EMA-Net利用Cross-Task Affinity实现参数高效的高性能预测
42 0
|
6月前
|
Java 容器
RestTemplate报错I/O error on POST request for "http://crmjob.xxx.xxx.com/removeJob": Read timed out; nested exception is java.net.SocketTimeoutException: Read timed out问题处理
讲述RestTemplate报错I/O error on POST request for "http://crmjob.xxx.xxx.com/removeJob": Read timed out; nested exception is java.net.SocketTimeoutException: Read timed out处理方案
|
4月前
|
程序员 数据库
VB.NET—Bug调试(参数话查询、附近语法错误)
VB.NET—Bug调试(参数话查询、附近语法错误)
25 0
|
6月前
|
JSON C# 数据格式
.net core 上传文件到本地服务器
## 1、本文是上传文件到本地服务器,主要以作者做的业务上传apk为例子,下面直接上代码 ```csharp [HttpGet, HttpPost, HttpOptions] [Consumes("application/json", "multipart/form-data")] public IActionResult UploadFileToServer([FromForm] IFormCollection file) { try { IFormFile item = null; if(file.IsNull() || file.Count
60 0
|
6月前
|
前端开发 JavaScript
.net core 前端传递参数有值 后端接收到的数据却是null
1、问题分析 在做接口测试时,偶然出现了前端输出有值,但是后端断点调试时却出现接收参数总是为null的情况 2、解决办法 前端打印log,看前端的每一个传值的数据类型,与后端请求参数类进行认真的一一比对 小技巧: ① 直接打印调用接口的传参值的数据类型,例如 console.log(type of this.form.name) --string console.log(type of this.form.age) --number 打印的数据类型与后端接口的参数类比对,查出不对应的类型 ② 关于非必填的值,默认传值可能出现空字符串(' ')、NaN值(Not a Number
99 0
|
9月前
|
API
.net core基于HttpClient实现的网络请求库
.net core基于HttpClient实现的网络请求库
146 0
|
9月前
|
前端开发
解决.NET Core Ajax请求后台传送参数过大请求失败问题
解决.NET Core Ajax请求后台传送参数过大请求失败问题
|
API 数据安全/隐私保护
十二、.net core(.NET 6)添加通用的访问webapi的方法(包括HttpClient和HttpWebRequest)
开发通用的访问webapi方法。在common工具文件夹下,新建一个类库项目:Wsk.Core.WebHelper,并引用Package包项目,然后新建一个类HttpClientHelper,用于使用HttpClient方法进行访问webapi:
509 0
十二、.net core(.NET 6)添加通用的访问webapi的方法(包括HttpClient和HttpWebRequest)