服务器不响应来自Expo Go应用程序的多部分/表单数据请求

Question

我目前有一个ASP。. NET Core Web API在localhost:5000上运行，并在ngrok上运行。我也有一个Expo应用程序运行在Expo Go Android(物理设备)上。

我的服务器根本没有响应multipart/form-data请求。但是，在Postman中发出的类似请求(使用上传的文件而不是从URI获取它们)可以工作。这让我认为这是可能是React Native (Expo)方面的问题.

在我的服务器上:

// Models/FileUploadRequest.cs
public class FileUploadRequest
{
public IFormFile File1 { get; set; } = default!;
}
// Controllers/FilesController.cs
[HttpPost("Upload")]
public async Task<IActionResult> Upload([FromForm] FileUploadRequest req)
{
var file1 = req.File1;
if (file1.Length > 0)
{
var safeFileName = Path.GetRandomFileName();
var safeFilePathName = Path.Combine(DANGEROUS_FILE_PATH, safeFileName);
var fileStream = System.IO.File.Create(safeFilePathName);
await file1.CopyToAsync(fileStream);
}
return Ok(new
{
Message = "File is uploaded",
File = file1
});
}

在RN应用程序上，我正在创建一个这样的请求:

// ...previous code that returns a `photo` object containing a URI to the temp photo file.
// Get image file from URI
const res = await fetch(photo.uri);
const img = await res.blob();
const formData = new FormData();
formData.append('File1', img);
const uploadRes = await API.post('Files/Upload', formData, {
headers: { 'Content-Type': 'multipart/form-data' },
});

但是每当我尝试发送这个请求时，服务器根本不响应． 然而，如果我删除标题(默认为Content-Type: application/json)，那么它确实响应400，以及这些日志:

Attempting to bind property 'Capstone.Features.File.FileUploadRequest.File1' of type 'Microsoft.AspNetCore.Http.IFormFile' using the name 'Fi
le1' in request data ...
dbug: Microsoft.AspNetCore.Mvc.ModelBinding.Binders.FormFileModelBinder[19]
Could not bind to model with name 'File1' and type 'Microsoft.AspNetCore.Http.IFormFile' as the request did not have a content type of either
'application/x-www-form-urlencoded' or 'multipart/form-data'.

Answer 1

我不确定server side代码，但对于React Native，您可以尝试修改您的代码如下:

const res = await fetch(photo.uri);
const img = await res.blob();
let formdata = new FormData();
formdata.append("File1", {uri: photo.uri, name: 'image.jpg', type: 'image/jpeg'})

fetch('your-server-url',{
method: 'post',
headers: {
'Content-Type': 'multipart/form-data',
},
body: formdata
}).then(response => {
console.log("image uploaded")
}).catch(err => {
console.log(err)
})  
});

p。S:您可以根据需要将image/jpeg更改为其他内容类型。

问题是formData.append('File1', img)，因为React native JSC不支持File和Blob，所以你必须使用库。

react-native-fetch-blob对此有很好的支持。您可以查看相同的示例。