以下是使用Vue CLI創建的Vue項目，結合Element UI來實現文件上傳功能的完整示例。

步驟

1. 創建Vue項目：確保你已經安裝了Vue CLI，若未安裝，可使用以下命令安裝：

npm install -g @vue/cli

然后創建一個新的Vue項目：

vue create element-file-upload-demo
cd element-file-upload-demo

2. 安裝Element UI：在項目根目錄下執行以下命令安裝Element UI：

npm install element-ui -S

3. 配置Element UI：在src/main.js中引入Element UI：

import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);new Vue({render: h => h(App),
}).$mount('#app');

4. 編寫后端接口（使用Spring Boot）：后端代碼和之前的示例相同，這里再給出一遍。

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;@RestController
public class FileUploadController {@PostMapping("/upload")public Map<String, Object> uploadFile(@RequestParam("file") MultipartFile file) {Map<String, Object> result = new HashMap<>();if (file.isEmpty()) {result.put("success", false);result.put("message", "上傳的文件為空");return result;}try {String filePath = "upload/" + file.getOriginalFilename();File dest = new File(filePath);if (!dest.getParentFile().exists()) {dest.getParentFile().mkdirs();}file.transferTo(dest);result.put("success", true);result.put("message", "文件上傳成功");} catch (IOException e) {result.put("success", false);result.put("message", "文件上傳失敗：" + e.getMessage());}return result;}
}

5. 編寫前端組件（Vue）：在src/components目錄下創建FileUpload.vue組件：

6. 在App.vue中使用組件：

<template><div id="app"><FileUpload /></div>
</template><script>
import FileUpload from './components/FileUpload.vue';export default {name: 'App',components: {FileUpload}
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

運行項目

1. 啟動Spring Boot項目。
2. 在Vue項目根目錄下執行npm run serve啟動前端項目。
3. 打開瀏覽器訪問http://localhost:8080，即可看到文件上傳界面。