Vue axios 中提交表單資料 含上傳檔案

2021-08-25 05:17:19 字數 1549 閱讀 4830

我們經常使用表單來上傳資料,以及上傳檔案,那麼怎麼在表單提交成功的時候接受伺服器的響應,並作出相應操作.

當然使用一般jquery上傳物件的格式也是可以的,如果使用傳統的表單上傳呢?

html **

lang="en">

title>

charset="utf-8">

name="viewport"

content="width=device-width, initial-scale=1">

head>

method="post"

action="/upload"

enctype="multipart/form-data">

type="text"

name="name"

value=""

placeholder="請輸入使用者名稱">

type="text"

name="age"

value=""

placeholder="請輸入年齡">

type="file"

name="uploadfile">

type="submit"

value="提交">

form>

body>

html>

這種方式可以提交,那麼問題來了,表單提交以後如果需要獲取伺服器的響應呢,如果需要在響應成功後跳轉頁面呢,這種方式顯得不好處理.

切回正題,在vue中這種簡單的表單提交如何處理呢,其實使用的是 formdata 來模擬表單提交

html **

lang="en">

title>

charset="utf-8">

name="viewport"

content="width=device-width, initial-scale=1">

src="">

script>

src="">

script>

head>

type="text"

value=""

v-model="name"

placeholder="請輸入使用者名稱">

type="text"

value=""

v-model="age"

placeholder="請輸入年齡">

type="file" @change="getfile($event)">

提交button>

表單資料是如何提交的?

1.http是如何提交表單的 標籤的屬性enctype設定以何種編碼方式提交表單資料。可選的值有三個 這是預設的編碼方式。它只處理表單域裡的value屬性值,採用這種編碼方式的表單會將表單域的值處理成url方式。multipart form data 這種編碼方式會以二進位製流的方式來處理表單資料,...

JSON編碼格式提交表單資料

以json編碼格式提交表單資料是html5對web發展進化的又一大貢獻,以前我們的html表單資料是通過key value方式傳輸的伺服器端,這種形式的傳輸對資料組織缺乏管理,形式十分原始。而新出現的json格式提交表單資料方法,將表單裡的所有資料轉化的具有一定規範的json格式,然後傳輸的伺服器端...

表單中提交文章長度問題

微軟對用request.form 可接收的最大資料限制為100k位元組。微軟建議用request.binaryread 讀取表單資料,但由於這種方法讀出的是二進位制資料,需要對讀出的資料逐字節進行分析,生成有意義的字串 msdn上的一段程式就是這樣寫的,但它並沒有考慮諸如標點符號等轉義字元需要進行特...