快捷導(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)輸入用戶(hù)名">
      <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)輸入用戶(hù)名">
    <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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: