Question

我有一个html表单，其中包含一些包含用户凭据和文件输入的字段，如下所示：

<form action="">
    username: <input type="text" name="name" id="name"> <br/>
    secret key: <input type="password" name="key" id="key"> <br/>

    <input type="file" name="actual_upload" id="actual_upload">
</form>

我希望仅在验证用户凭据后将文件上传到服务器S2，并且另一个服务器S1生成了唯一令牌（将令牌返回为JSON ）。

我想到这样做的一种方法是将其发布到S1，然后将请求从S1转发到S2。但是这样我必须在S1中收到完整的请求，这会不必要地增加S1的负载。

如果我将用户凭据放在请求标头而不是请求正文中，是否有办法只将标头发送到S1，然后在收到令牌后，使用该凭据将文件发送到{{ 1}}？或者还有另一种方式吗？

Answer 1

正如其他人在评论中提到的那样，您可以使用AJAX或Promises。一个简单的实现是使用fetch API。

以下是您可以使用的示例代码结构（我假设您的表单中有submit按钮）：

document.getElementById('submit').addEventListener('click', uploadFile);

function uploadFile() {

    event.preventDefault();

    let name = document.getElementById('name').value;
    let key = document.getElementById('key').value;

    let S1Url = // endpoint where token will be generated 

    fetch(S1Url, {
        method: 'GET',
    }).then(function(response){
        // extract token from JSON response
        // return token
    }).then(function(token) {
        let S2Url = // endpoint where file will be uploaded

        // file that has been selected in the form
        let input = document.querySelector('input[type="file"]');

        let data = new FormData();
        data.append('file', input.files[0]);

        return fetch(S2Url, {
            method: 'POST',
            body: data
        });

    }).then(function(response){
        // do something with the response
    }).catch(function(error) {
        // handle error
    });
}

查看此MDN documentation，其中有大量使用fetch API的示例。另外，请查看this answer here。

如何在JavaScript中发送多个POST请求

1 个答案: