如何在axios服务中将文件(pdf、doc)与JSON数据一起发布

Question

我想在axios服务中发送PDF/Docs文件以及其他JSON数据。我引用了(Ajax post a file from a form with Axios)，但它只发送没有任何JSON数据的文件。

 field_value: {}, // here it shows empty object,but it should show File Object
 field_type: "file_upload", 
 is_file_upload: true

}

当我在发送请求之前控制对象时，它在FormData()中显示了一个文件对象，但当我在post请求中看到它时，它显示了一个空大括号。

Answer 1

你可以这样做：

//HTML    
<input type="file" @change="onFileChanged" :multiple="multiple" :accept="accept" />

然后是处理文件输入的javascript代码：

onFileChanged(event) {
  var files = event.target.files || event.dataTransfer.files;
  if (!files.length) {
    return;
  }

  var formData = new FormData();

  // Add the File object to the formdata
  if (this.multiple) {
    formData.append("files", files);
  } else {
    formData.append("file", files[0]);
  }

  // Add your data...
  formData.append("data", myData);
}

uploadDocument(formData) {
  return Axios.post('/api/documents', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
}

使用您从文件输入类型中获取的formData发送到后台。

然后你可以这样做：

uploadDocument(formData).then((response) => {
  console.log('data sent');
})  

希望能有所帮助。