VueJS Загрузить форму отправки пустого объекта FormData -> 422 Unprocessable Entity - PullRequest
Новая
       86

VueJS Загрузить форму отправки пустого объекта FormData -> 422 Unprocessable Entity

0 голосов
/ 17 марта 2020

У меня есть компонент Vue, пытающийся загрузить файл через ax ios на сервер Express, который выдает ошибку. Файл, который я добавляю, является тем файлом, который я ожидаю увидеть, но добавление его, похоже, не добавляет его к объекту FormData, который, как мне кажется, вызывает ошибку. Я рассмотрел множество примеров, но не могу понять, чего мне не хватает.

Вот мой компонент загрузки SimpleUpload. vue: 

<template>

  <div>
      <div class="ui attached segment rounded mb-3">
        <form @submit.prevent="sendFile" enctype="multipart/form-data" class="ui form">
          <div v-if="message" class="`message ${error ? 'text-danger' : 'text-success'}`">
            <div class="message-body"> {{ message }}</div>
          </div>
          <div class="field">

            <label for="file" class="label">Upload File</label>

            <input 
              type="file"
              ref="file"
              @change="selectFile"
              class="file-input"
            />
            <span class="file-cta">
              <span class="file-icon">
                <i class="fas fa-upload"></i>
              </span>
              <span class="file-label">
                Choose a file...
              </span>
            </span>

            <span v-if="file" class="file-name">{{file.name}}</span> 
            <div class="field">
              <button class="btn btn-info">Send</button>
            </div>

          </div>

        </form>
      </div>
    </div>

</template>

<script>
import axios from 'axios'
export default {
  name: "SimpleUpload",

  data() {
    return {
      file: "",
      message: '',
      error: false
    }
  },

  methods: {
    selectFile() {
      const file = this.$refs.file.files[0];
      const allowedTypes = ["image/jpeg", "image/png", "image/gif"];
      const MAX_SIZE = 200000;
      const tooLarge = file.size > MAX_SIZE;

      if (allowedTypes.includes(file.type) && !tooLarge) {
        this.file = file;
        this.error = false;
        this.message = '';
      } else {
        this.error = true;
        this.message = tooLarge ? `Too large. Max size is ${MAX_SIZE/1000}kb` : "Only images are allowed"
      }
    },

    async sendFile() {
      const formData = new FormData();
      formData.append('file', this.file);
      console.log('file is: ', this.file)
      console.log('this is form data after file is added: ', formData)

      try {
        await axios.post('/uploads', formData);
        console.log('this is the formData being sent: ', formData)
        this.message = 'File has been uploaded';
        this.file = '';
        this.error = false;
      } catch(err) {
        this.message = err.response.data.error;
        this.error = true
      }
    }
  }
}
</script>
...