Блог

Я пытаюсь отправить файл с vue-страницы на сервер. Для этого я использую:
компонент FileFrom:

 <template>
    <div class="FileForm" v-bind:name="name">
        <label class="FileFormLabel">
            {{ name }}:
            <input type="file" files="files" v-on:change="fileUpload" v-bind:name="name"/>
        </label>
            <button class="SubmitBtn" v-on:click="submit">
                Submit
            </button>
    </div>
</template>

<script>
    export default {
        name: 'FileForm',
        props: ["value", "name"],
        data: function() {
            return {
                files: [],
            }
        },
        methods: {
            fileUpload: function(event) {
                this.$emit("upload", [event.target.files[0]])
            },
            submit: function() {
                this.files = []
                this.$emit("submit")
            },
        },
    }
</script>
 

Страница:

 <template>
  <Container>
      <div class="content">
        <h1>
             Upload files
        </h1>
        <div class="forms">
            <FileForm v-bind:files="files['Model']" name="Model" v-on:upload="upload_model" v-on:submit="submit_model">
            </FileForm>
        </div>
      </div>
  </Container>
</template>

<script>
import axios from 'axios'
import Container from '@/components/Container.vue'
import FileForm from '@/components/FileForm.vue'

export default {
  name: 'App',
  data: function() {
    return {
        files: {},
    }
  },
  components: {
    Container,
    FileForm
  },
  methods: {
    upload_model: function(file) {
        this.files['Model'] = file
    },
    submit_model: function() {
        let formData = new FormData();
        formData.append('Model', this.files['Model']);
        axios.post('http://'   document.location.host   '/api/upload_model', formData, {
                            headers: {
                                   'Content-Type': 'multipart/form-data'
                                     },
                         })
    }
  },
}
</script>
 

Но отправка запроса выглядит так:

 -----------------------------316537648527426258472746653245
Content-Disposition: form-data; name="Model"

[object File]
-----------------------------316537648527426258472746653245--
 

Файл отправляется не как файл, а как строка «[объектный файл]».
Насколько я понимаю, проблема в том, что FormData.append преобразует все объекты, не являющиеся Blob-объектами(или файлами), в строку и это.файлы[«Модель»] — это не тот. Это прокси-объект, который Vue.js используется для повышения реактивности.

Как я могу взять внутренний объект с этого прокси-сервера и использовать его для отправки?

Я изменился

 formData.append('Model', this.files['Model']);
 

Для

 formData.append('Model', this.files['Model'][0]);
 

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