FormData上传文件完整指南

发布时间：2023-05-18

一、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。

推荐文章