技术栈
- 前端用的是Vue3+Antdesign
- 后端用的是SpringBoot
使用场景
在前端上传多个文件(本例子是txt文件),后端接受之后并读取txt的内容。
前端代码
我没有把全部的代码贴上来哈,如果大家想看完整的,可以参考Antdesign官方给出的,我这里的使用场景跟官网的有一点点不太一样。我只把关键的代码贴了一下。
我这里的使用场景是用户上传了多个文件之后,再点击一个“Start Upload”按钮,才会把文件传到后端。
以下是UI组件的代码:
<a-upload-dragger
:file-list="fileList"
:multiple="true"
:before-upload="beforeUpload"
@remove="handleRemove"
name="file"
>
<p class="ant-upload-drag-icon">
<inbox-outlined></inbox-outlined>
</p>
<p class="ant-upload-text">Click or drag file to this area to upload</p>
<p class="ant-upload-hint">
Support for a single or bulk upload. Strictly prohibit from uploading company data or other
band files
</p>
</a-upload-dragger>
<a-button
type="primary"
:disabled="fileList.length === 0"
:loading="uploading"
style="margin-top: 16px"
@click="handleUpload"
>
{
{ uploading ? 'Uploading' : 'Start Upload' }}
</a-button>
以下是前端上传文件的调用方法
const handleRemove = file => {
const index = fileList.value.indexOf(file)
const newFileList = fileList.value.slice()
newFileList.splice(index, 1)
fileList.value = newFileList
}
const beforeUpload = file => {
fileList.value = [...fileList.value, file]
return false
}
const handleUpload = async () => {
const formData = new FormData()
fileList.value.forEach(file => {
// 注意这里append的名字“file”,需要跟后端接受的名字是一样的
formData.append('file', file)
})
uploading.value = true
// 这里的axios换成大家熟悉的写法就可以,主要是formData是放到body里面的
await APIService.post('/upload/xxx', formData).then((res) => {
console.log(res)
})
}
后端代码
我不写那么复杂,严格的分controller和service,目的是给大家看如何接收到文件并且读取文件。大家可以根据自己的实际情况去调整。
需要注意的是@RequestParam(value = "file")的file是要跟前端的append的那么file是要保持一致的。
@PostMapping("upload")
@ResponseStatus(HttpStatus.OK)
@ResponseBody
public void upload(@RequestParam(value = "file") MultipartFile[] files) throws IOException {
for (MultipartFile file : files) {
BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(file.getInputStream()));
String lineTxt;
while ((lineTxt=bufferedReader.readLine())!=null){
System.out.println(lineTxt);
}
}
}