如何制作包含多个文件的表单数据

Question

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

我的问题是我的 spring 启动应用程序中有一个这样的控制器

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

我的问题在于多个，如您所见，控制器等待一个 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);

如您所见，我已尝试创建一个文件数组，或者只是插入我的文件但是无论哪种方式，我的控制器中的数组里面都没有任何东西

你知道如何解决我的问题吗？

更新：

我试过这样的：

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' 部分有无 []

这与以前的行为相同，我通过我的休息端点但是有一个空的多部分文件

因为只是上传文件到mock的功能，我没法在页面中注入HTML来创建表单

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

更新 2：

我认为我的问题出在此处，当我使用函数 sendFiles 发出请求时，我可以在我的网络中看到这样的调用：

------WebKitFormBoundaryBCEt6Ivp0dW6OQ8y ...我的表单数据... ------WebKitFormBoundaryBCEt6Ivp0dW6OQ8y-- 所以有一个生成的 formBoundary，但它没有添加到 headers 中，我怎样才能让这个 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 个用于 headers，一个用于数据，\n 到 return 到行

我希望这对以后的人有所帮助！

谢谢大家！

如何制作包含多个文件的表单数据

How to make a formData with multiple files

javascript

multipartform-data

xmlhttprequest

form-data