如何使用Vue将文件数据发布到预先签名的S3 URI？

Question

我正在使用Rails后端构建Vue应用。我正在网上关注一些文章，这些文章建议了一种工作流程，其中：

1 /让我的Rails API生成预签名的S3网址2 /我通过Vue应用中的API请求获得的3 /我使用该请求中的数据将实际图片直接发布到S3

[前两个步骤工作正常，但是我很难理解如何在类型为'multipart / form-data'的请求中包含文件数据。

我的代码如下，我使用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时，似乎文件数据为空。另外，请求的大小还不够大，因此我的假设是文件丢失。是否有一些其他工作可以为此请求序列化文件？

谢谢

我正在使用Rails后端构建Vue应用。我正在网上关注一些文章，这些文章建议了一种工作流程，其中包括：1 /让我的Rails API生成一个预先签名的S3 url 2 /我通过一个API获取它...

Answer 1

问题是，您试图发布multipart/form-data，但正在发送Axios可能只是将其字符串化的JS对象文字。