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