0

Нужно загрузить получить несколько файлов. Я не очень могу в JS, и не понимаю в чем проблема.

Есть формочка:

                                            <div class="card">
                                        <div class="card-body">
                                            <h5 class="card-title upload-several-longphrase-loc">Upload several books for further processing</h5>
                                            <form action="/api/admin/upload-multiply-files" enctype="multipart/form-data" method="POST">
                                                <input accept=".hib" class="form-control-file" id="add-hib-files-input" multiple
                                                       name="files" type="file">
                                                <button id="uploadMultiplyFilesHidden" style="display: none"></button>
                                            </form>
                                        </div>
                                        <div class="card-footer text-center">
                                            <button class="btn btn-info btn-metro upload-to-server-loc" onclick="uploadMultiplyFiles()">Upload to server
                                            </button>
                                        </div>
                                    </div>

Если отправить фалы через HTML form, все приходит и читается! Но вот как это через JS fetch сделать правильно? Пробовал так:

function uploadMultiplyFiles() {
    let formData = new FormData();
    let data = document.querySelector('#add-hib-files-input[type="file"]');
    for (let i = 0; i < data.files.length; i++) {
        formData.append('file', data.files[i], '.hib');
    }
        fetch("/api/admin/upload-multiply-files", {
            method: 'POST',
            body: formData,
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        })
            // .then($("#uploadMultiplyFilesHidden").trigger('click'))
            .then($(this).tab('show'));

}

Получаю ошибку:

2020-06-29 15:59:26.777 ERROR 9264 --- [nio-8080-exec-1] o.a.c.c.C.[.[.[/].[dispatcherServlet]    : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is org.springframework.web.multipart.MultipartException: Failed to parse multipart servlet request; nested exception is java.io.IOException: org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found] with root cause

org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found
    at org.apache.tomcat.util.http.fileupload.impl.FileItemIteratorImpl.init(FileItemIteratorImpl.java:178) ~[tomcat-embed-core-9.0.30.jar:9.0.30]
    at org.apache.tomcat.util.http.fileupload.impl.FileItemIteratorImpl.getMultiPartStream(FileItemIteratorImpl.java:194) ~[tomcat-embed-core-9.0.30.jar:9.0.30]
    at org.apache.tomcat.util.http.fileupload.impl.FileItemIteratorImpl.findNextItem(FileItemIteratorImpl.java:213) ~[tomcat-embed-core-9.0.30.jar:9.0.30]
    at org.apache.tomcat.util.http.fileupload.impl.FileItemIteratorImpl.<init>(FileItemIteratorImpl.java:131) ~[tomcat-embed-core-9.0.30.jar:9.0.30]
    at org.apache.tomcat.util.http.fileupload.FileUploadBase.getItemIterator(FileUploadBase.java:255) ~[tomcat-embed-core-9.0.30.jar:9.0.30]
    at org.apache.tomcat.util.http.fileupload.FileUploadBase.parseRequest(FileUploadBase.java:279) ~[tomcat-embed-core-9.0.30.jar:9.0.30]
    at org.apache.catalina.connector.Request.parseParts(Request.java:2867) ~[tomcat-embed-core-9.0.30.jar:9.0.30]
    at org.apache.catalina.connector.Request.parseParameters(Request.java:3195) ~[tomcat-embed-core-9.0.30.jar:9.0.30]
    at org.apache.catalina.connector.Request.getParameter(Request.java:1113) ~[tomcat-embed-core-9.0.30.jar:9.0.30]
    at org.apache.catalina.connector.RequestFacade.getParameter(RequestFacade.java:381) ~[tomcat-embed-core-9.0.30.jar:9.0.30]
    at javax.servlet.ServletRequestWrapper.getParameter(ServletRequestWrapper.java:158) ~[tomcat-embed-core-9.0.30.jar:9.0.30]
    at javax.servlet.ServletRequestWrapper.getParameter(ServletRequestWrapper.java:158) ~[tomcat-embed-core-9.0.30.jar:9.0.30]
    at javax.servlet.ServletRequestWrapper.getParameter(ServletRequestWrapper.java:158) ~[tomcat-embed-core-9.0.30.jar:9.0.30]
...
5
  • попробуй убрать: headers: { 'Content-Type': 'multipart/form-data' } из настроек fetch
    – Grundy
    1 июл 2020 в 8:49
  • Без него тоже не работает. 1 июл 2020 в 20:01
  • Та же ошибка или другая?
    – Grundy
    1 июл 2020 в 20:04
  • org.springframework.web.multipart.MultipartException: Current request is not a multipart requestАн нет))) 1 июл 2020 в 21:31
  • посмотри что именно отправляется, на вкладке network в браузере. И добавь скрин в вопрос.
    – Grundy
    1 июл 2020 в 21:52

1 ответ 1

0

Видимо, Вы пока-что не понимаете, для чего можно использовать fetch.
fetch - это функция, которая используется лишь для получения данных. А Вам нужна отправка файлов.

Для этого, используйте данный мной пример:

$('button.btn.btn-info.btn-metro.upload-to-server-loc')
  .click(function() {
    let formData = new FormData(),
      filesContainer = $('input[type="file"]')[0],
      fi = 0;

    for (file of filesContainer.files) {
      formData.append(`file[${fi}]`, file, '.hib');
      fi++;
    }

    $.ajax({
      type: 'post',
      url: 'https://httpbin.org/anything',
      data: formData,
      cache: false,
      contentType: false,
      processData: false,
      success: response => {
        console.log(response);
      },
      error: errorResponse => {
        // Actions after error
      }
    });
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="file" multiple>
<button class="btn btn-info btn-metro upload-to-server-loc">Upload</button>

Для отправки файлов, нужен вызов $.ajax() из прототипа jQuery.
С помощью данной конструкции, Вы сможете отправлять нужные Вам файлы.

8
  • 1
    Спасибо, никогда JS специально не разбирал, не мой профиль)) спасибо за ответ!!! 30 июн 2020 в 17:51
  • Пожалуйста :) Если ответ Вас удовлетворил, тогда отметьте его лучшим 30 июн 2020 в 18:44
  • Да, конечно. Но я его еще не затестил. Что бы не пришлось еще один открывать 30 июн 2020 в 20:32
  • Столкнулся с проблемой, у меня formData это пустой массив получается formData: FormData {} . Хотя files: FileList {0: File, 1: File, 2: File, 3: File, 4: File, length: 5} и в цикле он их перебирает 1 июл 2020 в 1:23
  • Я видоизменил код. @РоманАндреевичЛукьянов попробуйте ещё раз 1 июл 2020 в 7:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.