异步:为什么表单发布重定向?

时间:2015-07-10 12:10:40

标签: javascript html node.js

目标:

  • 发表表格
  • 将文件上传到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>

我的表单功能:

(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");
   }
  });
});

1 个答案:

答案 0 :(得分:0)

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