异步:为什么是表单post重定向

Asynchronous : Why is form post redirecting?

本文关键字：post 重定向 表单 为什么 异步      更新时间：2023-09-26

目标:

  • 发布表单
  • 上传文件到AWS S3
  • 在HTML页面上显示有效的消息

使用Node JS, HTML.

页面继续等待服务器。从服务器端来看，似乎所有的函数都已经完成了运行。

你能分享一下这个问题的经验/任何调试方法吗?

HTML: 

<form method="POST" action="/submit_form/">
    <input type="hidden" id="avatar_url" name="avatar_url" value="/public/default.png" />
    <input type="text" name="username" placeholder="Username" /><br />
    <input type="text" name="full_name" placeholder="Full name" /><br /><br />
    <input id="form_input" type="submit" value="Update profile" />
</form>

My Form functions:

(function(){
    document.getElementById("form_input").onclick = init_upload;
})();
function init_upload(){
   var file = dataURItoBlob(document.getElementById('preview').src);
   if(file == null){
      alert("No file selected.");
      return;
  }
   get_signed_request(file);
}
function get_signed_request(file){
 var xhr = new XMLHttpRequest();
 var file_name = "an-image-name";
 xhr.open("GET", "/sign_s3?file_name="+file_name+"&file_type="+file.type);
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4){
    if(xhr.status === 200){
        var response = JSON.parse(xhr.responseText);
        upload_file(file, response.signed_request, response.url);
        console.log("xhr status 200 : file : ", file);
        console.log("xhr status 200 : response.signed_request : ", response.signed_request);
        console.log("xhr status 200 : response.url : ", response.url);
    }
    else{
        alert("Could not get signed URL.");
    }
}
};
  xhr.send();
}

和管理代码的帖子:

app.post('/submit_form', function(req, res){
  //something to be done
  console.log("submit form .....")
});
 app.get('/sign_s3', function(req, res){
 aws.config.update({accessKeyId: AWS_ACCESS_KEY, secretAccessKey: AWS_SECRET_KEY});
var s3 = new aws.S3();
var s3_params = {
  Bucket: S3_BUCKET_CREATION,
  Key: req.query.file_name,
  Expires: 60,
  ContentType: req.query.file_type,
  ACL: 'public-read'
};
s3.getSignedUrl('putObject', s3_params, function(err, data){
if(err){
    console.log("/sign S3 : error");
    console.log(err);
}
else{
    var return_data = {
        signed_request: data,
        url: 'https://'+S3_BUCKET_CREATION+'.s3.amazonaws.com/'+req.query.file_name
    };
    res.write(JSON.stringify(return_data));
    console.log("/sign S3 : end");
    res.end("200");
   }
  });
});

您需要使用res.status(200).end();发送响应，否则，您的客户端将一直等待永远不会到达的服务器响应。

相关文章：