由于项目中服务器是当作中转服务器使用,所以需要用到Http请求,项目中采用的是.Net Core框架,http请求使用的是HttpClient 一般前端以表单方式提交数据至服务端时,都需要设置请求头中Content-Type为mulipart/form-data,示例代码如下(vue.js):
let content = "hhhh"; let imgs = getFiles(); // getFiles()方法返回一个文件对象数组,可自定义实现, let formData = new FormData(); formData.append('content', content); // 添加表单参数,可自行添加 for(let i = 0; i < imgs.length; i++) { formData.append('imgs', imgs[i].file); // 添加文件 } this.$axios({ url: api.postUrl, // api接口路径 method: 'post', data: formData, // 设置请求头Content-Type为multipart/form-data;charset=UTF-8 headers: { 'Content-Type': 'multipart/form-data;charset=UTF-8' } }).then(result => { this.$message({ type: 'success', message: '成功' }); }) 复制代码
当然后端也可模拟以上的请求,代码如下(.Net Core):
string url = postUrl; var content = 'hhhh'; var fileList = getFiles(); // getFiles()方法返回一个文件对象数组 string boundary = DateTime.Now.Ticks.ToString("X"); var formData = new MultipartFormDataContent(boundary); formData.Add(new StringContent(content), "content"); for(var i=0; i < fileList.Count; i++) { var file = fileList[i]; byte[] data; using(var br = new BinaryReader(file.OpenReadStream())) data = br.ReadBytes((int)file.OpenReadStream().Length); ByteArrayContent imageContent = new ByteArrayContent(data); formData.Add(imageContent, 'imgs', file.FileName); } HttpClient httpClient = new HttpClient(); httpClient.PostAsync(url, formData).Result; 复制代码
使用上述代码转发到第三方服务器会有问题,会无法解析表单中的数据。
简要介绍下第三方服务器的情况: Node.js,框架采用Express, 解析form-data数据的中间件使用的是connect-multiparty,该服务器接收上述请求时,无法使用 req.body.content 和 req.files 获取到表单数据和文件,但是当使用中间件multer来解析form-data数据时就可以,不知道是不是中间件的问题。。
要解决上述无法解析的问题,方法就是添加表单项时,给key加双引号 "", 即改成如下:
formData.Add(new StringContent(content), "/"content/""); // 使用"/"来转义, 复制代码
添加文件表单项时作同上修改,便可以被第三方服务器成功解析到表单数据。