React Native -在一个请求中上传多个图像?

Question

这段代码是用来上传图片的。如果我上传一张图片，它可以工作，但是如果我上传一组图片，那么request.FILES将是空的。

const createFormData = (photos, body = {}) => {
const data = new FormData();
if (photos.length > 1) {
const image_list = [];
for (var i = 1; i < photos.length; i++) {
const photo = photos[i];
image_list.push({
name: photo.fileName,
type: photo.type,
uri: Platform.OS === "ios" ? photo.uri.replace("file://", "") : photo.uri,
});
}
console.log(image_list)
data.append("images", image_list);
}
Object.keys(body).forEach((key) => {
data.append(key, body[key]);
});
return data;
};

Answer 1

问题

您正在尝试添加列表而不是在data.append("images", image_list);中逐个附加图像

解决方案:

使用append方法代替将图像推入image_list数组:

const data = new FormData();
if (photos.length > 1) {
for (var i = 1; i < photos.length; i++) {
const photo = photos[i];
data.append('images', {
name: photo.fileName,
type: photo.type,
uri: Platform.OS === "ios" ? photo.uri.replace("file://", "") : photo.uri,
});
}
}

解释:

根据MDN，可以附加多个值使用相同的键:

formData.append('name', true);
formData.append('name', 74);
formData.append('name', 'John');
formData.getAll('name'); // ["true", "74", "John"]

你也可以使用forEach函数来做同样的事情，而不需要for循环:

const data = formData();
if(photos?.length > 1) {
photos.forEach( (photo) => {
data.append('images', {
name: photo.fileName,
type: photo.type,uri: Platform.OS === "ios" ? photo.uri.replace("file://", "") : photo.uri,
})
})
}