1、上传文件html

<template>

    <el-button type="primary" icon="CirclePlus" @click="upload(null)">上传文件</el-button>               

  <el-dialog
    title="上传文件"  
    :close-on-click-modal="false"
    v-model="uploadFile"
    width="500px">
        <el-upload
               class="upload-demo"
                drag
                accept=".pdf,.doc,.docx,.png,.jpg"
                :before-upload="beforeUpload"
                :file-list="fileList"
                :on-remove="handleRemove"
              >
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                    将文件拖到此处，<em>或点击上传</em>
                </div>
                <template #tip>
                    <div class="el-upload__tip">
                        只支持pdf、doc、docx、png、jpg
                    </div>
                </template>
       </el-upload>
        
       <template #footer>
          <div style="text-align: center;width: 100%;">
             <el-button type="primary" style="width: 200px;"                     @click="clickSave(upload)" >提交 
             </el-button>
          </div>
       </template>

   </el-dialog>
</template>


<script setup>
    import {ref,reactive} from 'vue'
    import {uploadImg} from '@/api/common.js';
    let uploadFile= ref(false);
    let fileList = ref([]);
    
    const upload= (val)=>{
        fileList.value = [];
        uploadFile.value = true;
    }
    const clickSave = (formEL)=>{
        //验证数据是否合格
        formEL.validate(flag=>{
            console.log("提交。。。"+flag)
            if(!flag)return;
            let attachment = null;
            if(fileList.value.length>0){
                attachment = fileList.value[0].url
            }

            //这个设置上传多个文件方法
            /*if(fileList.value.length>0){
                let fileUrls = [];
                fileList.value.forEach(f=>{
                    fileUrls.push(f.url)
                });
                attachment = fileUrls.join(';')
            }*/

            funUploadFile(p).then(res=>{
                if(!res.success){
                    ElMessage.error(res.message)
                    return;
                }
                uploadFile.value = false;
            })
        });
    }
    //上传前校验
    const beforeUpload = (file) => {
        const isLt2M = file.size / 1024 / 1024 < 10
        if (!isLt2M) {
            ElMessage.error('上传图片大小不能超过 10MB！')
            return;
        }
        if(fileList.value.length>1){
            ElMessage.error('只支持上传一个文件')
            return;
        }

        //这个设置上传多个文件，可根据自己业务情况决定，本文只是上传一个
        /*if(fileList.value.length>5){
            ElMessage.error('只支持5个文件');
            return;
        }*/

        let fd = new FormData()
        fd.append('file', file);
        uploadImg('public',fd).then(res=>{
            if(!res.success){
                ElMessage.error(res.message)
                return;
            }
            fileList.value.push({
                name:res.data.substring(res.data.lastIndexOf('/')+1,res.data.length),
                url:res.data
            });
        })
        return false;
    }
    //文件移除配置方法
    const handleRemove =(file,files)=>{
        fileList.value = files;
    }
</script>

2、上面引入的common.js

import https from '@/utils/https';

//图片上传接口
export function uploadImg(mkdir,data) {
  return https({
    url: `/admin/common/upload/${mkdir}`,
    method: 'post',
    data: data
  })
}

3、后端接口

@RestController
@RequestMapping("admin/common")
public class CommonController {

    @PostMapping("/upload/{mkdir}")
    public Result upload(@RequestParam("file") MultipartFile file,@PathVariable("mkdir")String mkdir) {
        if (file.isEmpty()) {
            return Result.failure("40400","上传文件为空");
        }
        String rootPath = filePath+mkdir+"/";
        File file1 = new File(rootPath);
        if(!file1.exists()){
            file1.mkdirs();
        }
        log.info("上传文件1:"+file1);
        String originalFilename = file.getOriginalFilename();
        String sub=originalFilename.substring(originalFilename.lastIndexOf("."), originalFilename.length());
        // 改用uuid为图片名称
        String fileName = UUIDUtils.getId() + sub;
        File dest = new File(rootPath + fileName);
        log.info("上传文件2:"+dest);
        try {
            file.transferTo(dest);
            return Result.success(fileHttp+mkdir+"/"+fileName);
        } catch (IOException e) {
            log.error("上传文件错误",e);
        }
        return Result.failure("40400","上传失败");
    }
}

注：filePath 是你保存到本地的地址，在配置文件中配置；fileHttp 是上传文件路由地址，如下：

filePath: D:/sy_data/upload/ 
fileHttp: http://你的ip地址:18080/upload/