如何制作包含多个文件的formData

Question

我正在尝试为我的应用程序进行端到端测试，为此我们使用模拟应用程序为前端注入数据

我的问题是我的弹簧启动应用程序中有一个控制器

@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 
}

我不能使用mock的IHM来插入数据，但是表单看起来像这样：

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

我的问题在于多重，如您所见，控制器等待multipartFile数组。

当我尝试推送我的数据时，我可以看到调试器我在数据的控制器方法中，但我的数组有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数组，或者只是插入我的文件，但无论哪种方式，我的控制器中的数组都没有任何内部

你知道我怎么解决我的问题吗？

更新：

我试过这样的：

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'))
}

有和没有[] for formdata中的'files'部分

这是与以前相同的行为，我通过我的休息端点但使用空的multipart文件

因为它只是将文件上传到模拟器的功能，所以我不能将HTML注入页面来创建表单

上面带有输入倍数的HTML是juste它与IHM如何一起工作的例子，遗憾的是我不能将它用于我的测试，因为它不是同一个应用程序

更新2：

我认为我的问题来自这里，当我使用sendFiles函数执行我的请求时，我可以在我的网络中看到这个：

------ WebKitFormBoundaryBCEt6Ivp0dW6OQ8y ...我的表单数据... ------ WebKitFormBoundaryBCEt6Ivp0dW6OQ8y--所以有一个formBoundary生成，但它没有添加到头文件中，我怎样才能让这个WebKitFormBoundary添加它在我的httpHeaders里面？

Answer 1

我终于解决了我的问题，

当我使用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个用于标题，1个用于数据，\ n返回到该行

我希望这将有助于未来的人！

谢谢大家！