如何通过JavaScript将HTML表单上传文件发送至EspoCRM API？

你之前尝试直接把文件的value放到JSON payload里是行不通的——文件属于二进制数据，不能通过JSON格式传输，得用FormData对象来处理包含文件的表单数据。下面是修改后的完整实现：

修改后的代码 #

HTML部分（无需改动） #

<div id="web-to-lead-form-container">
    <form id="web-to-lead-form">
        <div>
            <input type="text" name="firstName" placeholder="First Name">
        </div>
        <div>
            <input type="text" name="lastName" placeholder="Last Name" required>
        </div>
        <div>
            <input type="email" name="emailAddress" placeholder="Email Address" required>
        </div>
        <div>
            <input type="file" name="firstDocument">
        </div>
        <div>
            <input type="file" name="secondDocument">
        </div>
        <div>
            <button type="submit" name="submit">Submit</button>
        </div>
    </form>
</div>

JavaScript部分 #

let webToLeadFormElement = document.getElementById('web-to-lead-form');
let webToLeadFormIsSubmitted = false;

webToLeadFormElement.addEventListener('submit', event => {
    event.preventDefault();

    if (webToLeadFormIsSubmitted) {
        return;
    }

    webToLeadFormIsSubmitted = true;
    webToLeadFormElement.submit.setAttribute('disabled', 'disabled');

    // 用FormData直接获取表单所有数据，包括文件
    let formData = new FormData(webToLeadFormElement);

    // 替换成你的EspoCRM Lead Capture API地址
    let url = 'https://URL_OF_YOUR_CRM/api/v1/LeadCapture/API_KEY';

    let xhr = new XMLHttpRequest();

    xhr.open('POST', url, true);

    // 不要手动设置Content-Type，XMLHttpRequest会自动为FormData添加正确的multipart/form-data头
    xhr.setRequestHeader('Accept', 'application/json');

    xhr.onreadystatechange = () => {
        // 注意这里要用xhr而不是this，箭头函数的this不会指向xhr对象
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                let containerElement = document.getElementById('web-to-lead-form-container');
                containerElement.innerHTML = 'Sent';
            } else {
                // 提交失败时恢复按钮状态
                webToLeadFormElement.submit.removeAttribute('disabled');
                webToLeadFormIsSubmitted = false;
            }
        }
    };

    xhr.onerror = () => {
        webToLeadFormElement.submit.removeAttribute('disabled');
        webToLeadFormIsSubmitted = false;
    };

    // 直接发送FormData，不用JSON.stringify
    xhr.send(formData);
});

关键说明 #

• FormData的作用：它会自动收集表单里的所有字段，包括文件，并且按照multipart/form-data的格式编码，这是传输文件的标准方式。
• 去掉Content-Type设置：如果手动设置application/json，会导致服务器无法解析FormData；XMLHttpRequest在发送FormData时会自动添加正确的Content-Type头，还会包含boundary分隔符。
• 修正this指向问题：原来的箭头函数里用this会指向全局对象（浏览器里是window），所以要直接用xhr对象来访问readyState和status。

内容的提问来源于stack exchange，提问作者XHANXELI