上传后文件内容错误

Question

考虑这种形式：

<form class="well">
   <fieldset>
      <div class="form-group">
         <label for="exampleInputFile">File input</label><input id="exampleInputFile" type="file" aria-describedby="fileHelp" class="form-control-file">
      </div>
      <div class="form-group"><button type="submit" onclick="submitForm();" class="btn btn-info btn-sm pull-right">Submit</button></div>
   </fieldset>
</form>

这个javascript：

<script>
function submitForm() 
{
    console.log("Fetching the file...");
    var input = document.getElementById('input[type="file"]');
    var data = new FormData();
    data.append('file', input.files[0]);
    console.log(file.size);
    fetch('https://www.googleapis.com/upload/storage/v1/b/' + #{bucket} + '/o?uploadType=media&name=sample.txt', {
      method: 'POST',
      body: data
    }).then(function(res){ console.log(res.json()); });
}
</script>

它上传调用Google Cloud Storage API的文件：https://cloud.google.com/storage/docs/json_api/v1/objects/insert

但是，收到的文件看起来像这样：

内容：

------WebKitFormBoundaryZBAeI3W6nEzJeW7r--

类型：multipart/form-data; boundary=----WebKitFormBoundaryZBAeI3W6nEzJeW7r

我到底做错了什么？

此外，是否可以在上传后立即设置页面刷新？

Answer 1

您将文件上传为表单数据，它应该只是一个普通文件

fetch('https://www.googleapis.com/upload/storage/v1/b/' + #{bucket} + '/o?uploadType=media&name=sample.txt', {
  method: 'POST',
  body: input.files[0]
}).then(function(res){ console.log(res.json()); });

此外，您可能希望通过将按钮从提交按钮更改为普通按钮来阻止按下按钮时提交表单。 type="button"