vue.js - 使用 axios 将文件发布到谷歌存储桶

Question

我需要使用 vuejs 和 axios 将文件上传到谷歌云存储桶。

我已经通过以下 html 表单让它工作了:

<form action="https://storage.googleapis.com/some-bucket" 
      method="post" enctype="multipart/form-data">
    <input type="hidden" name="key" value="${filename}" />
    <input type="hidden" name="success_action_status" value="201" />
    <input type="file" name="file">
    <input type="submit" value="Upload">
</form>

我无法让它与 axios 一起工作。

<div class="container">
   <div class="large-12 medium-12 small-12 cell">
      <label>File
      <input type="file" id="file" ref="file" v-on:change="handleFileUpload()"/>
      </label>
      <button v-on:click="onSubmit()">Submit</button>
   </div>
</div>

方法

methods: {
    onSubmit() {
        let formData = new FormData();
        formData.append('file', this.file);

        let response = axios.post('https://storage.googleapis.com/some-bucket', formData, {
            headers: {
                'Content-Type': 'multipart/form-data'
            },
        })
        console.log(response)
    }

    handleFileUpload() {
        this.file = this.$refs.file.files[0];
    },
}

如何使用 axios 让它工作？

Answer 1

@deanjaymay 我注意到，在您处理 html 表单时，您使用的是 http 方法 POST，但在带有 axios 的 Vue 中，您使用的是方法 PUT。能不能把axios版本改成axios.post那么简单？

旁注，您的 axios 调用将始终返回一个响应，无论是成功的还是错误的。你应该添加一个，let response = axios.post ... 然后记录响应给你一些线索console.log("response:", response)

更新@deanjaymay 我认为问题可能与您使用的端点有关。您可以尝试将 header 更改为“multipart/related”，看看是否可行吗？根据我的阅读，谷歌云存储端点是用于分段上传，而不是基于表单的分段上传。有点令人困惑，但通过阅读他们的文档，我可能会尝试这样做？