如何使用Element-Plus+SpringBoot3实现手动上传文件？_element plus 手动上传

一、问题及其原因

环境准备：Vue3+Element-Plus+SpringBoot3+axios

        在我的毕设中出现了这样一个问题，使用原生的form标签或者PostMan上传文件时不会出现错误，一旦使用Element-Plus中的el-upload组件上传文件时，后端老是出现如下错误：

Resolved [org.springframework.web.multipart.support.MissingServletRequestPartException: Required part 'file' is not present.]

        查询了很多资料才发现忽视了最重要的问题，el-upload组件中的文件对象和SpirngBoot中

的MultipartFile不匹配，所以才会导致后台不能接受参数。el-upload组件中的文件对象名为：UploadFile。

        先来看看原生form表单中的file对象：

         在来看看el-upload组件中的file对象：

 对比发现，在el-upload组件中的对象除了file以外还包含文件的基本信息。

        下面是UploadFile对象源码：

interface UploadFile {
  name: string
  percentage?: number
  status: UploadStatus
  size?: number
  response?: unknown
  uid: number
  url?: string
  raw?: UploadRawFile
}
interface UploadRawFile extends File {
  uid: number
}

所以，在后端想使用MultipartFile接口 接收参数，不能将整个UploadFile对象作为参数传递。

二、代码部分

1.前端使用el-upload组件上传文件：

    <el-upload v-model:file-list="fileList" action="#" list-type="picture-card" :auto-upload="false" :limit="2">
        <el-icon>
            <Plus />
        </el-icon>
    </el-upload>
    <el-button>取消</el-button>
    <el-button @click="uploadFile">提交</el-button>

说明：

        v-model:file-list="fileList" 用于接收文件列表

        :auto-upload="false" 取消自动提交

        :limit="2" 限制文件个数

2.对数据进行封装并发送ajax请求：

//接收上传的文件
const fileList = ref([])
//上传文件
const uploadFile = () => {
    if (fileList.value.length > 0) {
        // 封装为FromData对象
        const fromData = new FormData()
        fileList.value.forEach((val) => {
            console.log('val.raw :>> ', val.raw);
            fromData.append('file', val.raw)
        })
        // 发送ajax请求，上传文件
        if (fromData != null) {
            request.post('/upload', fromData, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                }
            })
        }
    }
}

注意：

        1.必须指定请求头 'Content-Type': 'multipart/form-data'

        2.此处我对axios进行了封装

3.后端Controller接收参数

    // @CrossOrigin(origins ="*" ,maxAge = 3600)
    @PostMapping("/upload")
    @ResponseBody
    public Object upload(@RequestParam MultipartFile[] file) {
        for (int i = 0; i < file.length; i++) {
            System.out.println(file[i].toString());
        }
        return "success";
    }

注意：如果出现ajax跨域问题，跨域使用 @CrossOrigin 注解