javascript - 如何在 JavaScript 中验证多部分表单数据的内容长度？

Question

我将 FormData (包括文件)发布到服务器，该服务器拒绝内容长度超过特定限制的请求。我想在执行注定会被拒绝的请求之前验证 JavaScript 客户端(浏览器)中的内容长度。如何获取 (multipart/form-data) 编码的 FormData 对象的内容长度？

const formData = new FormData();
formData.append('text', text);
formData.append('file', file);
if (getContentLength(formData) > limit) {
    alert('Content length limit is exceeded');
} else {
    fetch(url, { method: 'POST', body: formData });
}

---

编辑:感谢您的回答，@Indgalante。仅使用字符串的 length 和文件的 size 并不能计算出正确的内容长度。

function getContentLength(formData) {
  const formDataEntries = [...formData.entries()]

  const contentLength = formDataEntries.reduce((acc, [key, value]) => {
    if (typeof value === 'string') return acc + value.length
    if (typeof value === 'object') return acc + value.size

    return acc
  }, 0)

  return contentLength
}

const formData = new FormData();
formData.append('text', 'foo');
alert(`calculated content-length is ${getContentLength(formData)}`);
fetch('https://httpbin.org/post', { method: 'POST', body: formData });

您没有考虑到表单数据已在请求中进行编码。因此，i.a.添加边界。示例中计算出的内容长度为 3，但在我的 Chrome 浏览器中应该为 138

在我的 Firefox 浏览器中为 172。我不确定其他浏览器的行为方式。

Answer 1

我仍然不知道是否可以计算出确切的大小，但你至少可以尝试估计一下:

/**
 * Estimate the content length of (multipart/form-data) encoded form data
 * object (sent in HTTP POST requests).
 * We do not know if you can get the actual content length.
 * Hence, it is estimated by this function.
 * As soon as {@link https://stackoverflow.com/q/62281752/1065654 this}
 * question is answered (correctly), the correct calculation should be used.
 *
 * @param formData
 */
function estimateContentLength(formData: FormData) {
    // Seems to be 44 in WebKit browsers (e.g. Chrome, Safari, etc.),
    // but varies at least in Firefox.
    const baseLength = 50; // estimated max value
    // Seems to be 87 in WebKit browsers (e.g. Chrome, Safari, etc.),
    // but varies at least in Firefox.
    const separatorLength = 115; // estimated max value
    let length = baseLength;
    const entries = formData.entries();
    for (const [key, value] of entries) {
        length += key.length + separatorLength;
        if (typeof value === 'object') {
            length += value.size;
        } else {
            length += String(value).length;
        }
    }
    return length;
}