如何POST文件数据到预先签名的S3 URI与Vue？

Question

我正在使用Rails后端构建一个Vue应用程序。我正在关注一些在线文章，其中提出了一个工作流程，我：

1. 让我的Rails API生成一个预签名的S3URL
2. 我通过Vue应用程序中的API请求获取
3. 我使用该请求中的数据将实际图像直接发布到S3

前两个步骤工作正常，但是我很难理解如何在请求类型为“多部分/表单数据”的请求中包含文件数据。

我的代码如下，我使用vuetify作为组件库：

<template>
    <v-form>
      <v-file-input v-model="file" label="File input"></v-file-input>
      <v-btn class="mt-2" block bottom color="primary" @click="submit">Opslaan</v-btn>
    </v-form>
</template>

<script>
import { axios_request } from '../_helpers';

export default {
  name:'AccountImageForm',
  data: () => ({
    file: {}
  }),
  methods: {
    filesChange(event) {
      this.file = event.target.files[0]
    },
    submit() {
      axios_request('/api/v1/images/upload_url')
        .then(
          response => {
            // this response contains the pre-signed info
            var data = {
              ...response.url_fields,
              file: this.file
            }
            var headers = { 'Content-Type': 'multipart/form-data' }
            axios_request(response.url, 'POST', data, headers)
              .then(
              response => {
                console.log(response)
              }
            )
          }
        )
    },
  }
}
</script>

此请求失败，出现以下错误

<Error>
  <Code>MalformedPOSTRequest</Code>
  <Message>The body of your POST request is not well-formed multipart/form-data.</Message>
  <RequestId>x</RequestId>
  <HostId>xx</HostId>
</Error>

当我查看原始的formData时，似乎filedata是空的。请求的大小也不够大，所以我的假设是文件丢失了。是否有一些额外的工作来序列化此请求的文件？

谢谢

Answer 1

问题是您试图发布多部分/表单数据，但发送的是一个JS对象文本，Axios可能只是在串接它。

您需要做的是创建一个FormData实例。

举个例子

response => {
  // convert your url_fields into a FormData instance
  const data = Object.entries(response.url_fields).reduce((fd, [ key, val ]) =>
      (fd.append(key, val), fd), new FormData())

  // now add the file
  data.append('file', this.file)

  axios_request(response.url, 'POST', data)
    .then(...)
}