用Vue和Java实现批量上传附件的基本思路：
Vue端：
- 创建一个文件Upload组件，包含一个文件Uploader组件，用于上传附件。
- 给Upload组件定义一个props属性，用于接收上传的文件列表。
- 在组件的mounted()生命周期方法中，通过ajax发送POST请求，上传附件到服务器，并获取返回结果。
- 将返回结果渲染到组件的template中，展示上传结果。
Java端：
- 创建一个文件UploadService类，用于处理文件上传请求。
- 在upload方法中，使用Java的HttpServletRequest对象获取上传文件列表。
- 使用Java的File对象将上传文件保存到服务器指定的目录中。
- 返回上传结果给前端页面。
以下是Vue和Java实现批量上传附件的代码示例：
Vue端代码：
代码语言：javascript复制<template>
<div>
<div v-for="(file, index) in fileList" :key="index">
<div>
<label>
<input type="file" :id="`file_${index}`" @change="handleFileChange(index)">
<span>{{ file.name }}</span>
</label>
</div>
<div>
<button @click="handleUpload(index)">上传</button>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
props: {
fileList: {
type: Array,
required: true
}
},
mounted() {
this.upload();
},
methods: {
upload() {
// 上传文件的API endpoint
const url = 'http://example.com/upload';
// 上传文件的请求参数
const formData = new FormData();
this.fileList.forEach((file, index) => {
formData.append('file', file);
});
// 发送POST请求，上传文件
axios.post(url, formData).then((res) => {
console.log(res.data);
// 处理上传结果
this.$set(this.fileList, index, res.data.file);
}).catch((err) => {
console.log(err);
});
},
handleFileChange(index) {
const file = this.fileList[index];
// 将选中的文件名显示在页面上
this.$set(this.fileList, index, file);
},
handleUpload(index) {
const file = this.fileList[index];
// 上传文件到服务器
this.$http.uploadFile(file, '/upload', {
headers: {'x-token': localStorage.getItem('token')}
}).then((res) => {
// 处理上传结果
console.log(res);
// 返回上传结果给前端页面
this.$toast.open({
message: '上传成功',
type: 'success'
});
}).catch((err) => {
// 处理上传失败
console.log(err);
// 返回上传失败的消息给前端页面
this.$toast.open({
message: '上传失败',
type: 'error'
});
});
}
}
};
</script>Java端代码：
代码语言：javascript复制import java.io.File;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.multipart.MultipartFile;
public class FileUploadService {
// 处理文件上传请求
public String upload(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 获取上传文件列表
MultipartFile[] files = request.getFile();
// 将上传文件保存到服务器指定的目录中
for (MultipartFile file : files) {
File dir = new File("/upload/");
if (!dir.exists()) {
dir.mkdirs();
}
file.transferTo(dir);
}
return "上传成功";
}
}
