Javascript 使用ajax和现有表单数据上载文件

我正在用ajax保存一个表单，该表单从Vue JS发布数据

var data=JSON.stringify（vm.data）

我希望在同一请求中上载文件。我看到了一些使用
FormData
的示例。然而，我似乎找不到一个例子来说明如何添加文件，并且仍然在同一个请求中发布现有数据

我已经看到可以使用
formData.append（name，value）添加特定字段但这似乎只是一次一个值。我发布的对象是一个对象数组，还包含子对象

是否可以一次性追加完整的数据，或者在遍历现有数据时必须追加每个项目

编辑-退出ajax请求：

var data = JSON.stringify(vm.data);

me.xhr({
    headers: {'Content-Type': 'multipart/form-data'},
    method: 'PUT',
    url: 'swatch/' + vm.swatch.id + '.json',
    callback: function(res) {
        vm.saving = false;
        try {
            alert(res.message ? res.message : "Swatch saved successfully");
        } catch (e) {
            alert(res.message ? res.message : "Failed to save the changes, please try again.");
        }
    },
    onerror: () => {
        vm.saving = false;
        alert('Failed to save the changes, please try again.');
    },
    data: { swatch: data }
}

您可以在以下位置使用FormData：

var data = JSON.stringify(vm.data);
var fd = new FormData();
fd.append('data',data);
fd.append('file',vm.fileUploaded);

me.xhr({
headers: {'Content-Type': 'multipart/form-data'},
method: 'PUT',
url: 'swatch/' + vm.swatch.id + '.json',
callback: function(res) {
    vm.saving = false;
    try {
        alert(res.message ? res.message : "Swatch saved successfully");
    } catch (e) {
        alert(res.message ? res.message : "Failed to save the changes, please try again.");
    }
},
onerror: () => {
    vm.saving = false;
    alert('Failed to save the changes, please try again.');
},
data: fd
}

组成部分：

<input type="file" @onchange="changed($event)">


new vue({
data:{fileUploaded:''},
  methods:{
      changed(event){
           this.fileUploaded = event.target.files[0];
       }
   }
})


新vue({
数据：{fileUploaded:'}，
方法：{
更改（事件）{
this.fileupload=event.target.files[0]；
}
}
})
您能展示一些您尝试过的代码吗？是的，您可以一次完成，为什么您需要追加，直接将JSON对象发送到服务器？您希望看到哪一部分？我已经发布了我目前如何发送数据。我不确定在使用formData时如何将其与文件组合。您使用ajax将数据发送到服务器的部分我添加了现有代码，其中尚未包含formData。它调用一个定制的xhr方法来提交请求。