不要動!把表單交出來(1) - formData


Posted by TempuraEngineer on 2022-07-22

目錄

formData是甚麼

formData object是一種物件,裡面裝了key和value組成的資料。key為欄位名,value則為欄位值

不同格式的資料可以透過一個request發送,常被用於傳資料給server,且起把檔案轉為base64再送出去來得

建立、使用formData

HTML有form tag時

<template>
  <div>
    <form ref="form" class="flex flex-col mb-3">
      <input type="text" name="text1" value="foo" class="mb-2">
      <input ref="file" type="file" name="file">
    </form>

    <button class="button" @click="generate">generate formData</button>

    <output ref="output"></output>   
  </div>
</template>

<script lang="ts">
  import Vue from 'vue'

  export default Vue.extend({
    name: 'Foo',
    data(){
      return{

      }
    },
    methods:{
      generate():void{
        const output = this.$refs.output as HTMLOutputElement;

        // 把form丟入formData constructor,formData就會根據name、value屬性被構成

        // An HTML <form> element — when specified, the FormData object will be populated with the form's current keys/values using the name property of each element for the keys and their submitted value for the values. It will also encode file input content.

        const formData = new FormData(this.$refs.form as HTMLFormElement); 

        output.textContent = '';

        for (const [key, value] of formData) { // formData可以直接被迭代,不必先透過formData.entries()取得keys
          output.textContent += `${key}: ${value}\n`;
        }
      }
    }
  })
</script>

HTML無form tag時

<template>
  <div>
    <input ref="text1" type="text" name="text1" value="foo" class="mb-2">
    <input ref="file" type="file" name="file">

    <button class="button" @click="generate">generate formData</button>

    <output ref="output"></output>   
  </div>
</template>

<script lang="ts">
  import Vue from 'vue'

  export default Vue.extend({
    name: 'Foo',
    data(){
      return{

      }
    },
    methods:{
      generate():void{
        const output = this.$refs.output as HTMLOutputElement;
        const formData = new FormData();

        // 使用append()可以自行插入值到formData,set()也可以插入值。兩者差在如果key已經存在,set會把舊值洗掉,append則否
        // 若要移除則用delete()
        formData.append('text1', (this.$refs.text1 as HTMLInputElement).value);
        formData.append('file', ((this.$refs.file as HTMLInputElement).files as FileList)[0]);

        output.textContent = '';

        for (const [key, value] of formData) {
          output.textContent += `${key}: ${value}\n`;
        }
      }
    }
  })
</script>


參考資料

MDN - FormData
一起理解 HTML 當中的 form-data


#formData







Related Posts

JS 與瀏覽器的溝通與網頁事件處理

JS 與瀏覽器的溝通與網頁事件處理

JavaScript-提升hoisting

JavaScript-提升hoisting

React hook form(2) - useForm & 它的回傳值(2)

React hook form(2) - useForm & 它的回傳值(2)


Comments