Spring Cloud Feign MultipartFile文件上传踩坑之路（包含前端文件上传请求、后端文件保存到aliyun-oss文件服务器）

最新推荐文章于 2025-09-26 17:42:42 发布

原创

最新推荐文章于 2025-09-26 17:42:42 发布 · 2.9k 阅读

标签

#spring cloud #前端 #服务器

本文总结了使用Spring Cloud Feign进行MultipartFile文件上传的踩坑经验，包括前端使用ant-design的a-upload组件进行文件上传，后端通过Feign服务处理文件，最终将文件保存在阿里云OSS服务器上。详细阐述了前端POST请求设置、后端服务提供者与消费者接口配置，以及文件保存至OSS的步骤。

Spring Cloud Feign MultipartFile文件上传踩坑之路总结

一、前端文件上传

文件上传组件用的是ant-design的a-upload组件，我的界面如下所示：
在这里插入图片描述
文件上传请求API:
FileUtils.js

import axios from "axios"

const uploadApi = ({
   
   file, URL, onUploadProgress}) => {
   
   
    const formData = new FormData()
    formData.append('file', file)
    return axios.post(URL, formData, {
   
   headers:{
   
   
        'Content-type': 'multipart/form-data',
      },
      onUploadProgress // 上传进度回调函数 onUploadProgress(ev))
    }) 
}

export default uploadApi;

需要注意的只有FileUtils.js定义的uploadApi请求函数，其中URL为后端请求接口(“/imageConvert/upload”)，文件上传方法必须定义为POST，在headers加入’Content-type’: ‘multipart/form-data’，后端即可用@RequestParam或者@RequestPart + MultipartFile 来接受文件。
FileUpload.vue（无关紧要，用法大致相同，看你自己需求，这里只是提供一个参考范例）

// 自定义文件上传公共函数
// e - 上传组件返回的上传实例，里面包括 file，和一些组件方法
// e.file - 上传的文件实例对象
const customUpload = e => {
   
   
    let curFile = fileList.value.filter(item => item.uid == e.file.uid)[0]
    curFile.status = 'uploading'
    uploadApi({
   
   
        file: e.file,
        URL: '/imageConvert/upload',
        // uid: 'admin',  // 需要更改为用户id，待修改
        onUploadProgress: ev => {
   
   
            // ev - axios 上传进度实例，上传过程触发多次
            // ev.loaded 当前已上传内容的大小，ev.total - 本次上传请求内容总大小
            // console.log(ev);
            const percent = (ev.loaded / ev.total) * 100;
            // 计算出上传进度，调用组件进度条方法
            e.onProgress({
   
    percent });
        }
    })
        .then(res => {
   
   
            let curFile = fileList.value.filter(item => item.uid == e.file.uid)[0]
            curFile.response = res.data
            if(res.data.code == 400) {
   
   
                curFile.status = 'error'
                curFile['error'] = curFile.response.msg
                console.error(`文件${
    
    curFile.name}上传失败：${
    
    res.data.msg}`)
            } else {
   
   
                // 通知组件该文件上传成功
                curFile.status =