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 
}

我无法使用模拟的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数组，或者只是插入我的文件但无论哪种方式，我控制器中的数组里面什么都没有

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

更新：

我已经这样尝试过：

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

在表单数据中的“文件”部分带有和不带有[]

与以前的行为相同，我经过了我的其余端点，但是有一个空的分段文件

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

上面带有输入倍数的HTML只是它与IHM一起工作的示例，不幸的是，由于它不是同一应用程序，因此我无法在测试中使用它

更新2：

我认为我的问题出在这里，当我使用sendFiles函数进行请求时，我可以在网络中看到以下内容：

-WebKitFormBoundaryBCEt6Ivp0dW6OQ8y ...我的表格数据... ------ WebKitFormBoundaryBCEt6Ivp0dW6OQ8y-- 因此，有一个formBoundary生成了，但是没有添加到标题中，如何获取此WebKitFormBoundary并将其添加到我的HTTPHeaders中？

Answer 1

我终于解决了我的问题，

当我使用XmlHttpRequest时，该请求没有在我的请求中添加任何边界，这就是为什么我添加了一个

当我切换到URL提取时，在请求中添加了边界，因此后端无法识别我的文件，我只需要删除请求中的边界部分

我遇到的另一个问题是空文件，它来自我声明它的方式，要创建一个csv文件，您需要执行以下操作

myConf := config.Config{SomeProp: "foo", OtherProp: true}

如您所见，我的数组只有2个条目，1个用于标题，1个用于数据，\ n返回到该行

我希望这会对未来的人有所帮助！

谢谢！

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

1 个答案: