FormData上傳文件完整指南

一、FormData上傳文件大小

在使用FormData上傳文件時，需要注意文件大小的限制。一般來說，後端會對上傳文件大小做出限制，因此需要掌握如何判斷上傳文件大小。

可以使用JavaScript的File對象的size屬性獲取上傳文件的大小。

document.querySelector('input[type="file"]').addEventListener('change', function() {
    const file = this.files[0];
    if (file.size > 10 * 1024 * 1024) {  // 限制上傳文件最大10MB
        alert('上傳文件大小超過限制');
        return;
    }
    // 文件大小符合要求，進行後續操作
});

上面的代碼限制了上傳文件最大10MB，可以根據實際需求修改。

二、使用FormData上傳文件

使用FormData上傳文件非常簡單，只需要創建FormData對象，然後使用append方法添加上傳文件即可。

const formData = new FormData();
formData.append('file', file);  // file為input[type="file"]選擇的文件
fetch('/upload', {
    method: 'POST',
    body: formData
});

上面的代碼使用fetch API發送FormData對象，以POST方式上傳文件到伺服器上。

三、FormData上傳文件Vue

在Vue中使用FormData上傳文件同樣也很簡單，只需要在template中添加input[type=”file”]，然後在methods中使用FormData對象上傳文件即可。

<template>
  <div>
    <input type="file" ref="file">
    <button @click="upload">上傳</button>
  </div>
</template>

<script>
export default {
  methods: {
    upload() {
      const file = this.$refs.file.files[0];
      const formData = new FormData();
      formData.append('file', file);
      fetch('/upload', {
        method: 'POST',
        body: formData
      });
    }
  }
}
</script>

四、FormData上傳文件為空

在使用FormData上傳文件時，有時候可能會遇到上傳文件為空的情況。這種情況一般是因為沒有選擇文件導致的，可以添加判斷上傳文件是否為空。

document.querySelector('input[type="file"]').addEventListener('change', function() {
    const file = this.files[0];
    if (!file) {
        alert('請先選擇文件');
        return;
    }
    // 文件不為空，進行後續操作
});

上面的代碼會在File對象為空時，彈出提示框。

五、FormData上傳文件二進位

在FormData上傳文件時，有些場景需要以二進位的形式上傳文件，而不是直接上傳。此時可以使用FileReader對象將文件讀取為二進位數據。

document.querySelector('input[type="file"]').addEventListener('change', function() {
    const file = this.files[0];
    const reader = new FileReader();
    reader.onload = function() {
        const arrayBuffer = this.result;
        const uint8Array = new Uint8Array(arrayBuffer);
        const blob = new Blob([uint8Array], { type: file.type });
        const formData = new FormData();
        formData.append('file', blob);
        fetch('/upload', {
            method: 'POST',
            body: formData
        });
    };
    reader.readAsArrayBuffer(file);
});

上面的代碼使用FileReader對象讀取文件，並將文件以二進位數據的形式上傳到伺服器上。

六、FormData格式傳遞參數

在使用FormData上傳文件時，有時候需要在上傳文件的同時傳遞其他參數。此時可以使用FormData的append方法來添加參數。

const formData = new FormData();
formData.append('username', '張三');
formData.append('password', '123456');
formData.append('file', file);
fetch('/upload', {
    method: 'POST',
    body: formData
});

上面的代碼同時上傳了一個文件和兩個參數：username和password。

七、FormData格式

在使用FormData上傳文件時，需要了解FormData的格式。

FormData是一種表單數據格式，可以用來模擬form表單提交數據。它是一個key-value的形式，其中key為參數名，value為參數值。在上傳文件時，可以使用append方法往FormData對象中添加key-value。

需要注意的是，如果上傳多個文件時，可以添加多個相同的key，這樣後端就可以識別出這些文件屬於同一組。

八、FormData是什麼

FormData是一種表單數據格式，可以用來模擬form表單提交數據，支持上傳文件、傳遞其他參數等。它可以通過JavaScript動態創建，並使用append方法添加參數。在使用fetch API發送FormData對象時，會自動設置Content-Type為multipart/form-data。