上传包含 ajax 和现有表单数据的文件

Question

我正在使用 ajax 保存来自 Vue JS 的 posts 数据的表单。

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

我希望在同一个请求中上传文件。我看过几个使用 FormData 的例子。但是我似乎找不到如何添加文件的示例，并且仍然 post 同一请求中的现有数据。

我看到可以使用 formData.append(name, value); 添加特定字段，但这似乎一次只能添加一个值。我正在 posting 的对象是一个对象数组，还包含子对象。

是否可以一次性追加完整的内容，还是我必须在遍历现有数据时追加每一项？

编辑 - 退出 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 和现有表单数据的文件

Upload files with ajax and existing form data

javascript

ajax

form-data

vue.js

vuejs2