Как сделать formData с несколькими файлами - PullRequest
Новая
       24

Как сделать formData с несколькими файлами

0 голосов
/ 05 марта 2019

Я пытаюсь выполнить сквозное тестирование для своего приложения, для этого мы используем фиктивное приложение для ввода данных для внешнего интерфейса

Моя проблема в том, что в моем приложении для весенней загрузки есть контроллеркак это 

@PostMapping("/data")
public String uploadCsv(@RequestParam("files") final MultipartFile[] files, final HttpServletResponse httpResponse) throws IOException {
    final List<MultipartFile> listFiles = Arrays.asList(files);
    // some functionnal code 
}

Я не могу использовать IHM макета для вставки данных, но форма выглядит так: 

<form name="uploadForm" method="post" enctype="multipart/form-data" action="/data">
    <input type="file" name="files" multiple/>
    <input type="submit" value="upload"/>
</form>

Моя проблема здесь с кратным, так какВы можете видеть, что контроллер ожидает массив multiparFile.

Когда я пытаюсь отправить свои данные, я вижу с помощью отладчика, что я иду в методе контроллера для данных, но мой массив имеет размер 0и не могу получить нужные мне данные

Вот мой код для отправки моих данных: 

let files =[];
let myFile = createFile();
files.push(myFile);
let data = new FormData();
data.append('files',files);
let XHR = new XMLHttpRequest();
XHR.open('POST', 'http://127.0.0.1:9000/data');
XHR.setRequestHeader('Content-Type', 'multipart/form-data;boundary=---------------------------7da24f2e50046');
XHR.setRequestHeader('Access-Control-Allow-Origin','*');
XHR.send(data);

, как вы можете видеть, я пытался создать массив File, илипросто вставьте мои файлы, но в любом случае мой массив в контроллере не содержит ничего внутри

знаете, как я могу решить мою проблему?

ОБНОВЛЕНИЕ:

I 'мы попробовали это так: 

data.append('files[]',files);
sendFiles(data);

function sendFiles(formData) {
const options = {
method: "POST",
headers: {
  'Content-Type': 'multipart/form-data;boundary=---------------------------7da24f2e50046',
  'Access-Control-Allow-Origin': '*'
},
body: formData
};
return fetch('http://127.0.0.1:9000/data', options)
.then(response => console.log(response.data))
.catch(e => console.log('url is local not going to work'))
}

С и без [] для части 'files' вformdata

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

Поскольку эта функция просто загружает файл в макет, я могу 'Вставить HTML-код на страницу для создания формы

Приведенный выше HTML-код с вводом множественного числа является примером того, как он работает с IHM, к сожалению, я не могу использовать это для своего теста, потому что это не то же самое приложение

ОБНОВЛЕНИЕ 2:

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

----- WebKitFormBoundaryBCEt6Ivp0dW6OQ8y ... данные моей формы ... ------ WebKitFormBoundaryBCEt6Ivp0dW6OQ8y-- Таким образом, существует formBoundary, который генерируется, но не добавляется в заголовки, как я могу получить этот WebKitFormBoundary, чтобы добавить его внутрьмои httpHeaders?

1 Ответ

0 голосов
/ 11 марта 2019

Я наконец решил свою проблему,

когда я использовал XmlHttpRequest, запрос не добавил границ в мой запрос, поэтому я добавил один

Когда я переключаюсь на выборку моего URL, в моем запросе добавляется граница, поэтому мой файл не распознается моим бэкэндом, мне просто нужно было удалить часть границы в моем запросе

Другая проблема, с которой я столкнулся, была связана с пустым файлом, он возник из-за того, как я его объявлял, чтобы создать файл csv, вам нужно сделать что-то вроде этого 

new File(['header;for;the;csv;\n','data;for;the;csv1\ndata;for;the;csv2\n?...'],'filename.csv',{    type: "text/csv"});

Как видите, в моем массиве есть только 2 записи, 1 для заголовков, одна для данных и \ n для возврата к строке

Я надеюсь, что это поможет кому-то в будущем!

Спасибо всем!

...