快捷導(dǎo)航

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

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

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

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

當(dāng)然使用一般jQuery上傳對象的格式也是可以的,如果使用傳統(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="請輸入用戶名">
      <input type="text" name="age" value="" placeholder="請輸入年齡">
      <input type="file" name="uploadFile">
      <input type="submit" value="提交">
    </form>
  </body>
</html>

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

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

<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="請輸入用戶名">
    <input type="text" value="" v-model="age" placeholder="請輸入年齡">
    <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>

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

您可能感興趣的文章:

相關(guān)文章

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