如何将带-F参数的curl请求转换为纯JavaScript/jQuery实现

错误原因 #

1. 接口地址填写错误：curl调用的接口是https://api.anonfiles.com/upload，你填写的https://api.anonfiles.com/v1/upload多了/v1路径前缀，会触发404错误
2. 直接同步提交表单会触发页面跳转，无法在当前页面直接获取JSON返回结果，需要改用异步AJAX提交

正确实现方案 #

1. 基础HTML结构

<form id="uploadForm" enctype="multipart/form-data">
    <input type="hidden" name="MAX_FILE_SIZE" value="30000" />
    Send this file: <input name="file" type="file" id="fileInput" />
    <input type="submit" value="Send File" />
</form>
<p id="resultTip"></p>

2. jQuery实现版本

// 需先在页面引入jQuery依赖
$('#uploadForm').on('submit', function(e) {
    // 阻止表单默认跳转提交行为
    e.preventDefault();
    // 构建FormData对象，和curl的-F参数逻辑完全对应
    const uploadData = new FormData(this);

    $.ajax({
        url: 'https://api.anonfiles.com/upload',
        type: 'POST',
        data: uploadData,
        // 必须配置以下两项，避免jQuery自动处理格式出错
        processData: false,
        contentType: false,
        success: function(jsonRes) {
            // jsonRes就是接口返回的JSON结果，可自行解析处理
            console.log('上传成功', jsonRes);
            $('#resultTip').text('上传完成，返回结果：' + JSON.stringify(jsonRes));
        },
        error: function(err) {
            console.error('上传失败', err);
            $('#resultTip').text('上传失败，请检查文件大小或网络环境');
        }
    });
});

3. 原生JS实现版本（无需jQuery）

document.getElementById('uploadForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const uploadData = new FormData(this);

    fetch('https://api.anonfiles.com/upload', {
        method: 'POST',
        body: uploadData
    })
    .then(response => response.json())
    .then(jsonRes => {
        console.log('上传成功', jsonRes);
        document.getElementById('resultTip').textContent = '上传完成，返回结果：' + JSON.stringify(jsonRes);
    })
    .catch(err => {
        console.error('上传失败', err);
        document.getElementById('resultTip').textContent = '上传失败，请检查文件大小或网络环境';
    });
});

注意事项 #

如果浏览器报跨域错误，说明该接口没有开放前端直接调用的CORS权限，需要通过你的后端服务做一层代理转发请求。

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