vue3 +spring boot文件上传

export const uploadFileRequest = (url, params) => {// 创建 FormData 对象const formData = new FormData();// 将参数添加到 FormData 中Object.keys(params).forEach(key => {formData.append(key, params[key]);});return axios({method: 'post',url: `${base}${url}`,data: formData,headers: {// 不要设置 Content-Type，让浏览器自动处理// 'Content-Type': 'multipart/form-data'},// 可选：添加上传进度监控onUploadProgress: progressEvent => {const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);console.log('上传进度:', percentCompleted);// 可以通过回调函数或状态管理库更新进度条}});
};

调用：

// 准备包含文件的参数
const fileInput = document.getElementById('fileInput');
const formData = {file: fileInput.files[0],        // 文件description: '这是一个测试文件',  // 其他表单字段userId: 123                      // 其他表单字段
};// 调用上传函数
uploadFileRequest('/api/upload', formData).then(response => {console.log('上传成功:', response.data);}).catch(error => {console.error('上传失败:', error);});

后端接收文件：

1. 后端接收文件：

   • 若使用 Spring Boot，需使用 @RequestParam 或 @RequestPart 注解接收文件：

     java

     @PostMapping("/upload")
     public String handleFileUpload(@RequestParam("file") MultipartFile file,@RequestParam("description") String description
     ) {// 处理文件和其他字段
     }
     

2. 大文件上传优化：

   • 考虑使用分块上传（Chunked Upload）或第三方库（如 tus-js-client）。

3. 错误处理：

   • 添加更详细的错误处理逻辑，例如：

     .catch(error => {if (error.response) {console.error('服务器响应错误:', error.response.status);} else if (error.request) {console.error('请求已发送，但没有响应');} else {console.error('请求错误:', error.message);}
     });