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云端存储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"

上传后文件内容错误

1 个答案: