[英]How to make a formData with multiple files
I'm trying to make end to end test for my application, to do so we use a mock application to inject data for the front end 我正在尝试对我的应用程序进行端到端测试,为此,我们使用模拟应用程序为前端注入数据
My problem is I have a controller in my spring boot application like this 我的问题是我的春季启动应用程序中有一个像这样的控制器
@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
}
I can't use the IHM of the mock to insert data, but the form look like this : 我无法使用模拟的IHM插入数据,但表单如下所示:
<form name="uploadForm" method="post" enctype="multipart/form-data" action="/data">
<input type="file" name="files" multiple/>
<input type="submit" value="upload"/>
</form>
My problem here is with the multiple, as you can see, the controller wait for an array of multiparFile. 如您所见,我的问题在于倍数,控制器等待multiparFile数组。
When I try to push my data, I can see with the debugger that I go in the controller method for the data but my array have a 0 size and can't get the data I need 当我尝试推送数据时,可以通过调试器看到我进入了数据的控制器方法,但是我的数组的大小为0,并且无法获取所需的数据
Here is my code to submit my data : 这是我提交数据的代码:
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);
as you can see, I've tried to create an array of File, or just insert my files but either way my array in my controller don't have anything inside 如您所见,我试图创建一个File数组,或者只是插入我的文件,但是无论哪种方式,我的控制器中的数组都没有任何内容
do you know how I can solve my problem ? 你知道我能解决我的问题吗?
UPDATE : 更新:
I've tried it like this : 我已经这样尝试过了:
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'))
}
With and without [] for the 'files' part in the formdata 在formdata中的“文件”部分带有和不带有[]
it was the same behavior as before, I go through my rest endpoint but with an empty multipart file 它与以前的行为相同,我通过了我的其余端点,但是有一个空的多部分文件
Because it's a function just to upload the file to the mock, I can't inject HTML into the page to create a form 因为它只是将文件上传到模拟文件的功能,所以我无法将HTML注入页面中以创建表单
The HTML above with input multiple is juste the example of how it work with the IHM, unfortunately I can't use this for my test because it's not the same application 上面带有输入倍数的HTML只是它与IHM一起工作的示例,很遗憾,我不能在测试中使用它,因为它不是同一应用程序
UPDATE 2 : 更新2:
I think my problem come from here, when I do my request with the function sendFiles, I can see in my network call this : 我认为我的问题出在这里,当我使用sendFiles函数进行请求时,可以在网络中看到以下内容:
------WebKitFormBoundaryBCEt6Ivp0dW6OQ8y ... my form data ... ------WebKitFormBoundaryBCEt6Ivp0dW6OQ8y-- So there is a formBoundary which is generate, but it's not added into the headers, how can I get this WebKitFormBoundary to add it inside my httpHeaders ? ------ WebKitFormBoundaryBCEt6Ivp0dW6OQ8y ...我的表单数据... ------ WebKitFormBoundaryBCEt6Ivp0dW6OQ8y--因此有一个formBoundary正在生成,但未添加到标题中,我如何获得要添加的WebKitFormBoundary它在我的httpHeaders内部吗?
I finally solved my issue, 我终于解决了我的问题,
when I was using an XmlHttpRequest, the request didn't add any boundaries into my request, that's why I added one 当我使用XmlHttpRequest时,请求没有在请求中添加任何边界,这就是为什么我添加了一个
When I switch to a fetch to my URL, a boundary was added in my request, so my file wasn't recognized by my backend, I just had to remove the boundary part on my request 当我切换到URL提取时,在请求中添加了一个边界,因此后端无法识别我的文件,我只需要删除请求中的边界部分
Another problems I had was with the empty file, it came from the way I was declaring it, to create a csv file you need to do something like this 我遇到的另一个问题是空文件,它来自我声明它的方式,要创建一个csv文件,您需要执行以下操作
new File(['header;for;the;csv;\n','data;for;the;csv1\ndata;for;the;csv2\n?...'],'filename.csv',{ type: "text/csv"});
As you can see, my array only have 2 entries, 1 for headers, one for data, and \\n to return to the line 如您所见,我的数组只有2个条目,1个用于标题,一个用于数据,\\ n返回到该行
I hope this will help someone in the futur! 希望这对未来的人有所帮助!
Thanks all ! 谢谢大家!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.