Question

我正在用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 }
}

Answer 1

您可以在以下位置使用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];
       }
   }
})

上载带有Ajax和现有表单数据的文件

1 个答案: