Vue axios 中提交表单数据(含上传文件)

(编辑：jimmy 日期: 2026/1/13 浏览：3 次 )

我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作.

当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢"htmlcode">

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <form method="post" action="/upload" enctype="multipart/form-data">
      <input type="text" name="name" value="" placeholder="请输入用户名">
      <input type="text" name="age" value="" placeholder="请输入年龄">
      <input type="file" name="uploadFile">
      <input type="submit" value="提交">
    </form>
  </body>
</html>

这种方式可以提交,那么问题来了,表单提交以后如果需要获取服务器的响应呢,如果需要在响应成功后跳转页面呢,这种方式显得不好处理.

切回正题,在vue中这种简单的表单提交如何处理呢,其实使用的是 FormData 来模拟表单提交

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="/UploadFiles/2021-04-02/vue.js">

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：vuejs手把手教你写一个完整的购物车实例代码
下一篇：解决webpack打包速度慢的解决办法汇总