Axios для Vue не загружает изображение на сервер

Question

Axios для Vue не загружает изображение на сервер

1

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

axios.defaults.headers.common['Content-Type'] = 'application/json [or something]';

И, как я помню, часть моего решения заключалась в том, чтобы удалить эту конфигурацию, чтобы сделать загрузку. Я просто удалил эту строку из своего кода, и все запросы работали хорошо. Как только я удалил его, я заметил, что мой запрос заголовков изменился на это (см. Прикрепленное изображение и обратите внимание на запись Content-Type):

введите описание изображения здесь

Еще одна вещь, о которой вы должны помнить, - это имя поля для вашего <input type="file" name="file">. У меня есть java-бэкэнд, ожидающий параметр с именем «файл», поэтому в моем случае мой входной файл HAS должен быть установлен как «файл» на моем HTML и на моей стороне сервера, например:

    public ResponseEntity<Show> create(
        @RequestParam("file") MultipartFile file, 
        RedirectAttributes redirectAttributes) { ... }

Соблюдайте запись @RequestParam("file")...

И в файле HTML:

    <form enctype="multipart/form-data" novalidate v-if="isInitial || isSaving">
    <div class="well">
        <div class="form-group">
            <label>* Selecione o arquivo excel. O sistema fara o upload automaticamente!</label>
            <div class="dropbox">
              <input type="file" single name="file" :disabled="isSaving" @change="filesChange($event.target.name, $event.target.files); fileCount = $event.target.files.length"
                accept="application/vnd.ms-excel" class="input-file">
                <p v-if="isInitial">
                  Solte o arquivo excel aqui<br> ou clique para buscar.
                </p>
                <p v-if="isSaving">
                  Carregando arquivo...
                </p>
            </div>
        </div>
    </div>
</form>

Вы также можете взглянуть на этот урок, он мне поможет: https://scotch.io/tutorials/how-to-handle-file-uploads-in-vue-2

Надеюсь, это поможет!

JavaScript, vuejs2, изображения загрузки, Вардар,

javascript,vuejs2,image-uploading,axios,

1

Ответов: 1