Как отправить данные файла в предварительно назначенный SRI URI с Vue? - PullRequest
Новая
       20

Как отправить данные файла в предварительно назначенный SRI URI с Vue?

1 голос
/ 30 марта 2020

Я создаю Vue приложение с бэкэндом Rails. Я слежу за некоторыми статьями в Интернете, в которых предлагается рабочий процесс, в котором я:

  1. Позвольте моему Rails API генерировать предварительно подписанный URL-адрес S3
  2. , который я получаю через запрос API в моем Vue app
  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>

This Запросы не выполняются со следующей ошибкой 

<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, кажется, что данные файла пусты. Также размер запроса недостаточно велик, поэтому я предполагаю, что файл отсутствует. Есть ли дополнительная работа по сериализации файла для этого запроса?

Спасибо

1 Ответ

2 голосов
/ 30 марта 2020

Проблема в том, что вы пытаетесь опубликовать multipart/form-data, но отправляете литерал объекта JS, который, скорее всего, Ax ios просто строковый.

Вместо этого вам нужно создать 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, { 'Content-type': 'multipart/form-data' })
    .then(...)
}
...