带有自定义属性的 Angular 1.x 图像上传

Question

我正在使用Angular 1.x通过拖放界面提供多文件上传功能。我想使用标志将其中一个图像作为默认值。

我正在使用一个 FormData 对象，该对象将传递到我的后端进行保存。这是我将图像推送到对象之前的数据结构：

listing_images: Array(3)
0: File
default_image: 1
lastModified: 1521848990788
lastModifiedDate: Fri Mar 23 2018 23:49:50 GMT+0000 (Greenwich Mean Time) {}
name: "002.JPG"
preview: "data:image/jpeg;base64,/9j/4f8ERXhpZgAATU0AKgAAAAg"
size: 136276
type: "image/jpeg"
webkitRelativePath: ""
__proto__: File
1: File ....

该代码段显示了要上传的 3 张图像之一 - 其中第一张将 default_image 标志设置为 true，到目前为止一切顺利。

然后，我使用 append(( 函数将图像添加到我的 formData 中：

var dataObj = new FormData();
angular.forEach(listing_images, function(key, value) {
dataObj.set(listing_images[key], value);
});

如果我循环 dataObj 的条目((，我会看到：

listing_images[0], [object File]
listing_images[1], [object File]
listing_images[2], [object File]

所以一切看起来都不错，然后在提交 dataObj 后在我的后端，如果我调试请求数据，我会看到每个图像的这种格式：

'tmp_name' => 'tmpphp82C1.tmp',
'error' => (int) 0,
'name' => '002.JPG',
'type' => 'image/jpeg',
'size' => '136276',

可以看出，default_image旗已经丢失。有没有办法保留我推送到文件对象的自定义值？

Answer 1

如果您检查 FormData 规范，您可以看到FormData值可以是USVStringBlob或File/Blob。因此，您无法发送任何您想要的对象(除非您将其转换为某个字符串并以适当的方式在服务器端解析(。

如果需要发送default_image属性，则应将其作为附加参数发送。像这样，我想：

var dataObj = new FormData();
angular.forEach(listing_images, function(key, value) {
if (value.default_image) {
dataObj.set('default_image', key);
}
dataObj.set(listing_images[key], value);
});