先在后端写一个文件上传的api，然后在vue项目中的api文件夹下写一个uploadfile.js，然后在vue项目的views文件夹下写一个uploadfile.vue，在uploadfile.vue里调用后端文件上传的api实现文件上传

后端文件上传的api可以使用Node.js和Express框架实现，具体代码如下：

const express = require('express');
const multer = require('multer');

const app = express();

// 设置上传文件的存储路径和文件名
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/');
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname);
  }
});

// 创建multer实例
const upload = multer({ storage: storage });

// 定义上传文件的路由
app.post('/upload', upload.single('file'), (req, res) => {
  console.log(req.file);
  res.send('文件上传成功！');
});

// 启动服务
app.listen(3000, () => {
  console.log('服务已启动，http://localhost:3000');
});

在vue项目的api文件夹下，创建uploadfile.js文件，实现文件上传的api调用：

import axios from 'axios';

const baseUrl = 'http://localhost:3000';

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

  return axios.post(`${baseUrl}/upload`, formData);
}

在vue项目的views文件夹下，创建uploadfile.vue文件，实现文件上传的功能：

<template>
  <div>
    <input type="file" @change="handleFileChange">
    <button @click="handleUpload">上传文件</button>
  </div>
</template>

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

export default {
  data() {
    return {
      selectedFile: null
    };
  },
  methods: {
    handleFileChange(event) {
      this.selectedFile = event.target.files[0];
    },
    handleUpload() {
      if (!this.selectedFile) {
        alert('请选择文件！');
        return;
      }

      uploadFile(this.selectedFile)
        .then(response => {
          console.log(response.data);
          alert('文件上传成功！');
        })
        .catch(error => {
          console.log(error);
          alert('文件上传失败！');
        });
    }
  }
};
</script>

在uploadfile.vue文件中，首先创建一个文件选择框，当用户选择文件后，将选中的文件保存在selectedFile变量中。然后点击“上传文件”按钮，调用uploadFile函数，将选中的文件作为参数传递给它。uploadFile函数会发送POST请求到后端的文件上传api，上传成功后返回一个成功的提示信息。如果上传失败，则返回一个错误信息。