Vue.js 使用RESTAPI POST将文件上载到Google云存储桶

我到处找了找，但找不到任何有用的东西。 我试图在我的项目中使用RESTAPI将一个文件上传到google cloud bucket，但我得到的只是bucket中的一个二进制文件，而不是实际的文件。 使用curl上传，如works fine中所述，例如，我可以将png上传到我的bucket中。 我正在使用Vue.js和axios发出请求。 这是表单的代码：

 <template>
  <div>
    <div id="form">
      <form @submit.prevent="postFiles" enctype="multipart/form-data">
        <input type="file" @change="previewFiles" multiple />
        <input type="submit" value="Send file" />
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: "InsertFile",
  data() {
    return {
      file: "",
    };
  },
  methods: {
    previewFiles(event) { //I use this just for the debug
      console.log(event.target.files);
      this.file = event.target.files;
    },
    postFiles(){
        this.$emit('insert-file',this.file);
    }
  },
};
</script>

导出默认值{
名称：“插入文件”，
数据（）{
返回{
文件：“”，
};
},
方法：{
previewFiles（event）{//我使用它只是为了调试
log（event.target.files）；
this.file=event.target.files；
},
postFiles（）{
此.emit（'insert-file'，this.file）；
}
},
};

这是视图的代码

<template>
  <div class="upload">
    <h1>Here you can upload your files</h1>
    <InsertFile @insert-file="postFile" />
  </div>
</template>

<script>
import InsertFile from "../components/InsertFile";
import axios from "axios";


let token='exampletoken'
let config = {
  headers: {
    'content-type': 'multipart/form-data',
    Authorization: "Bearer " + token,
    
  },
};

let url =
  "https://storage.googleapis.com/upload/storage/v1/b/bucketURL/o?uploadType=media&name=foo.png";

export default {
  components: {
    InsertFile,
  },
  methods: {
    postFile(path) {
      let bodyFormData = new FormData();
      bodyFormData.append("image", path[0]);
      console.log(bodyFormData);

      axios
        .post(url, bodyFormData, config)
        .then((response) => {
          console.log("Response", response.data);
        })
        .catch((e) => {
          console.log("Error: ", e.response.data);
        });
    },
  },
};
</script>

在这里你可以上传你的文件
从“./components/InsertFile”导入InsertFile；
从“axios”导入axios；
让token='exampletoken'
让配置={
标题：{
“内容类型”：“多部分/表单数据”，
授权：“持票人”+代币，
},
};
让url=
"https://storage.googleapis.com/upload/storage/v1/b/bucketURL/o?uploadType=media&name=foo.png";
导出默认值{
组成部分：{
插入文件，
},
方法：{
postFile（路径）{
让bodyFormData=新FormData（）；
追加（“图像”，路径[0]）；
console.log（bodyFormData）；
axios
.post（url、bodyFormData、配置）
。然后（（响应）=>{
console.log（“Response”，Response.data）；
})
.catch（（e）=>{
日志（“错误：”，例如response.data）；
});
},
},
};

从这段代码中，我在bucket中获得了一个multipart/formdata类型的文件，如何将其作为png（或任何类型的文件）上传

[编辑]

这是现在的表格

 <template>
  <div>
    <div id="form">
      <form @submit.prevent="postFiles" enctype="multipart/form-data">
        <input type="file" @change="previewFiles" multiple />
        <input type="hidden" name="Content-Type" value="image/png">
        <input type="submit" value="Send file" />
      </form>
    </div>
  </div>
</template>

这就是方法

<script>
    import InsertFile from "../components/InsertFile";
    import axios from "axios";
    
    let url =
      "https://storage.googleapis.com/upload/storage/v1/b/myBucket/o?uploadType=media&name=prova.png";
    
    export default {
      components: {
        InsertFile,
      },
      methods: {
        postFile(path) {
          console.log(path);
          let bodyFormData = new FormData();
          bodyFormData.append("file", path[0]);
          bodyFormData.append("content-type", "image/png");
          console.log(bodyFormData);
          let token ='mytoken'
          let config = {
            headers: {
              Authorization: "Bearer " + token,
            },
          };
          axios
            .put(url, bodyFormData, config)
            .then((response) => {
              console.log("Response", response.data);
            })
            .catch((e) => {
              console.log("Error: ", e.response.data);
            });
        },
      },
    };

</script>

从“./components/InsertFile”导入InsertFile；
从“axios”导入axios；
让url=
"https://storage.googleapis.com/upload/storage/v1/b/myBucket/o?uploadType=media&name=prova.png";
导出默认值{
组成部分：{
插入文件，
},
方法：{
postFile（路径）{
console.log（路径）；
让bodyFormData=新FormData（）；
追加（“文件”，路径[0]）；
bodyFormData.append（“内容类型”、“图像/png”）；
console.log（bodyFormData）；
让token='mytoken'
让配置={
标题：{
授权：“持票人”+代币，
},
};
axios
.put（url、bodyFormData、配置）
。然后（（响应）=>{
console.log（“Response”，Response.data）；
})
.catch（（e）=>{
日志（“错误：”，例如response.data）；
});
},
},
};

在多部分数据中，您需要将mime类型作为内容类型发送

例如，使用JPEG，您可以发送

内容类型：image/JPEG

如果没有这一点，上载将假定文件类型默认为二进制数据而不是图像

在您提供的文档链接中，查看此

OBJECT\u CONTENT\u TYPE

部分

引用他们的文档：

通过表单上载的文件的MIME类型。如果未指定内容类型，则云存储系统在提供内容时默认为应用程序/八位字节流

如果您能够，我建议您安装并使用官方NodeJS SDK的存储部分，并遵循以下示例：

这应该更加健壮，并提供一个立即运行的示例

---

它还将使使用API的其他功能（如列表或删除操作）变得更加容易。

在多部分数据中，您需要将mime类型作为内容类型发送

例如，使用JPEG，您可以发送

内容类型：image/JPEG

如果没有这一点，上载将假定文件类型默认为二进制数据而不是图像

在您提供的文档链接中，查看此

OBJECT\u CONTENT\u TYPE

部分

引用他们的文档：

通过表单上载的文件的MIME类型。如果未指定内容类型，则云存储系统在提供内容时默认为应用程序/八位字节流

如果您能够，我建议您安装并使用官方NodeJS SDK的存储部分，并遵循以下示例：

这应该更加健壮，并提供一个立即运行的示例

---

它还将使使用API的其他功能（如列表或删除操作）变得更加容易。

注释不用于扩展讨论；此对话已结束。评论不用于扩展讨论；这段对话已经结束。