快捷導(dǎo)航

Vue axios 中提交表單數(shù)據(jù)(含上傳文件)

更新時(shí)間：2017年07月06日 15:29:38 作者：守候你的季節(jié)

本篇文章主要介紹了Vue axios 中提交表單數(shù)據(jù)(含上傳文件)，具有一定的參考價(jià)值，有興趣的可以了解一下

我們經(jīng)常使用表單來(lái)上傳數(shù)據(jù),以及上傳文件,那么怎么在表單提交成功的時(shí)候接受服務(wù)器的響應(yīng),并作出相應(yīng)操作.

當(dāng)然使用一般jQuery上傳對(duì)象的格式也是可以的,如果使用傳統(tǒng)的表單上傳呢?

<!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="請(qǐng)輸入用戶名">
      <input type="text" name="age" value="" placeholder="請(qǐng)輸入年齡">
      <input type="file" name="uploadFile">
      <input type="submit" value="提交">
    </form>
  </body>
</html>

這種方式可以提交,那么問(wèn)題來(lái)了,表單提交以后如果需要獲取服務(wù)器的響應(yīng)呢,如果需要在響應(yīng)成功后跳轉(zhuǎn)頁(yè)面呢,這種方式顯得不好處理.

切回正題,在vue中這種簡(jiǎn)單的表單提交如何處理呢,其實(shí)使用的是 FormData 來(lái)模擬表單提交

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.16.2/axios.js"></script>
</head>

<body>
  <form>
    <input type="text" value="" v-model="name" placeholder="請(qǐng)輸入用戶名">
    <input type="text" value="" v-model="age" placeholder="請(qǐng)輸入年齡">
    <input type="file" @change="getFile($event)">
    <button @click="submitForm($event)">提交</button>
  </form>

  <script>
    window.onload = function () {
      Vue.prototype.$http = axios;
      new Vue({
        el: 'form',
        data: {
          name: '',
          age: '',
          file: ''
        },
        methods: {
          getFile(event) {
            this.file = event.target.files[0];
            console.log(this.file);
          },
          submitForm(event) {
            event.preventDefault();
            let formData = new FormData();
            formData.append('name', this.name);
            formData.append('age', this.age);
            formData.append('file', this.file);

            let config = {
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            }

            this.$http.post('/upload', formData, config).then(function (res) {
              if (res.status === 2000) {
                /*這里做處理*/
              }
            })
          }
        }
      })
    }
  </script>
</body>

</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Nuxt3項(xiàng)目中問(wèn)題匯總之刷新頁(yè)面useFetch無(wú)返回解決
Nuxt.js是一個(gè)基于 Vue.js 的服務(wù)端渲染應(yīng)用框架,這篇文章主要給大家介紹了關(guān)于Nuxt3項(xiàng)目中問(wèn)題匯總之刷新頁(yè)面useFetch無(wú)返回解決辦法的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-03-03
vue實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)及滾動(dòng)監(jiān)聽(tīng)的方法
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)及滾動(dòng)監(jiān)聽(tīng)的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
Vue中的methods、computed計(jì)算屬性和watch監(jiān)聽(tīng)屬性的使用和區(qū)別解析
這篇文章主要介紹了Vue中的methods、computed計(jì)算屬性和watch監(jiān)聽(tīng)屬性的使用和區(qū)別,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2024-01-01
vue中axios防止多次觸發(fā)終止多次請(qǐng)求的示例代碼（防抖）
這篇文章主要介紹了vue中axios防止多次觸發(fā)終止多次請(qǐng)求的實(shí)現(xiàn)方法（防抖）,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-02-02
vue 中 get / delete 傳遞數(shù)組參數(shù)方法
這篇文章主要介紹了vue 中 get / delete 傳遞數(shù)組參數(shù)方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-03-03
vue通過(guò)?API?監(jiān)聽(tīng)數(shù)組的變化
這篇文章主要介紹了vue通過(guò)?API?監(jiān)聽(tīng)數(shù)組的變化,在?Vue?中，你可以通過(guò)監(jiān)聽(tīng)數(shù)組的變化來(lái)更新界面，Vue?提供了一些特殊的語(yǔ)法以及?API?來(lái)實(shí)現(xiàn)對(duì)數(shù)組的監(jiān)聽(tīng)，本文通過(guò)實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下
2023-05-05
iview+vue實(shí)現(xiàn)導(dǎo)入EXCEL預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了iview+vue實(shí)現(xiàn)導(dǎo)入EXCEL預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
Vue路由鉤子之a(chǎn)fterEach beforeEach的區(qū)別詳解
這篇文章主要介紹了Vue路由鉤子 afterEach beforeEach區(qū)別 ,vue-router作為vue里面最基礎(chǔ)的服務(wù),學(xué)習(xí)一段時(shí)間,對(duì)遇到的需求進(jìn)行一些總結(jié)。需要的朋友可以參考下
2018-07-07
vue 微信掃碼登錄(自定義樣式)
這篇文章主要介紹了vue 微信掃碼登錄(自定義樣式)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
詳解vue數(shù)據(jù)響應(yīng)式原理之?dāng)?shù)組
這篇文章主要為大家詳細(xì)介紹了vue數(shù)據(jù)響應(yīng)式原理之?dāng)?shù)組，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-02-02