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