先在后端创建文件上传的实体类uploadfile.java，包括文件名，上传日期，文件路径，上传人编号，然后创建uploadfileController，在其中写一个文件上传的api，然后在vue项目中的api文件夹下写一个uploadfile.js，用axios.request的方式调用后端的文件上传的api，名为upload_f，然后在vue项目的views文件夹下写一个uploadfile.vue，在uploadfile.vue里调用uploadfile.js中的upload_f实现文件上传

的功能。

在uploadfile.java中，需要使用注解@MultipartConfig，表示这个实体类是用于文件上传的。同时需要定义文件名、上传日期、文件路径、上传人编号等属性，并为其定义get和set方法。

在uploadfileController中，需要定义一个文件上传的api，使用注解@PostMapping和@RequestParam，表示这个api是用于接收POST请求和请求中的文件参数。在方法体中，使用try-catch语句处理文件上传过程中可能出现的异常，然后将文件存储到指定路径下，并将文件名、上传日期、文件路径、上传人编号等信息保存到数据库中。

在uploadfile.js中，需要使用axios.request方法发送POST请求，并将文件作为参数传递给后端。在then方法中，处理后端返回的数据，将上传结果显示在页面上。

在uploadfile.vue中，需要使用element-ui组件库中的el-upload组件实现文件上传功能。在el-upload组件中，设置action属性为后端的文件上传api的地址，设置headers属性为请求头信息，设置on-success属性为上传成功后的回调函数，将上传结果显示在页面上。

示例代码：

uploadfile.java:

import javax.servlet.annotation.MultipartConfig;

@MultipartConfig
public class UploadFile {
    private String fileName;
    private Date uploadDate;
    private String filePath;
    private String uploaderId;

    // 省略get和set方法
}

uploadfileController.java:

@RestController
public class UploadFileController {
    @PostMapping("/upload")
    public String upload(@RequestParam("file") MultipartFile file) {
        try {
            // 文件上传过程
            // 将文件存储到指定路径下
            // 将文件名、上传日期、文件路径、上传人编号等信息保存到数据库中
            return "上传成功";
        } catch (Exception e) {
            return "上传失败";
        }
    }
}

uploadfile.js:

import axios from 'axios';

export function upload_f(file) {
    const formData = new FormData();
    formData.append('file', file);

    return axios.request({
        url: '/upload',
        method: 'post',
        headers: {
            'Content-Type': 'multipart/form-data'
        },
        data: formData
    }).then(res => {
        return res.data;
    }).catch(err => {
        console.log(err);
    })
}

uploadfile.vue:

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :headers="{ 'Content-Type': 'multipart/form-data' }"
    :on-success="handleSuccess"
    :show-file-list="false">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
import { upload_f } from '@/api/uploadfile';

export default {
  methods: {
    handleSuccess(response) {
      console.log(response);
    }
  }
};
</script>