springboot+vue图片上传

好的，以下是一个简单的Spring Boot和Vue.js的图片上传示例： 1. 创建Spring Boot项目 首先，我们需要创建一个Spring Boot项目。可以使用Spring Initializr或者其他方式创建一个基础的Spring Boot项目。 2. 添加依赖 在pom.xml中添加以下依赖： ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.6</version> </dependency> ``` 3. 编写后端代码 创建一个Controller类，处理上传请求： ```java @RestController public class UploadController { private static final String UPLOAD_DIR = "/path/to/upload/dir"; @PostMapping("/upload") public String upload(MultipartFile file) throws IOException { // 生成唯一文件名 String fileName = UUID.randomUUID().toString() + "." + FilenameUtils.getExtension(file.getOriginalFilename()); // 将文件保存到指定目录 File targetFile = new File(UPLOAD_DIR, fileName); FileUtils.copyInputStreamToFile(file.getInputStream(), targetFile); // 返回文件URL return "/uploads/" + fileName; } } ``` 4. 创建Vue.js项目 在命令行中执行以下命令创建一个Vue.js项目： ```bash vue create my-project ``` 5. 添加依赖 在package.json中添加以下依赖： ```json "devDependencies": { "axios": "^0.21.1" } ``` 6. 编写前端代码 创建一个组件，处理文件上传： ```html <template> <div> <input type="file" @change="handleFileChange"> <button @click="uploadFile">上传</button> </div> </template> <script> import axios from 'axios' export default { data() { return { file: null } }, methods: { handleFileChange(event) { this.file = event.target.files[0] }, uploadFile() { let formData = new FormData() formData.append('file', this.file) axios.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(response => { console.log(response.data) }).catch(error => { console.error(error) }) } } } </script> ``` 这个组件包含一个文件选择器和一个上传按钮。当用户选择文件后，文件会被保存到组件的data中。当用户点击上传按钮时，组件使用axios库向后端发送一个POST请求，上传文件。 注意：这个示例中的上传路径为“/upload”，需要根据实际情况修改。 以上就是一个简单的Spring Boot和Vue.js的图片上传示例，你可以根据自己的需求进行修改和扩展。

要实现Spring Boot + Vue + ElementUI 的图片回显功能，需要以下步骤： 1. 在Vue中使用ElementUI的Upload组件上传图片，并将上传成功后的图片地址保存在Vue的data中。 2. 在Spring Boot的Controller中编写接收图片上传请求的方法，将上传的图片保存到服务器上，并返回图片的访问地址。 3. 在Vue中使用img标签展示上传成功的图片，将img标签的src属性设置为上传成功后返回的图片地址。 下面是一个简单的示例代码： Vue代码： ``` <template> <div> <el-upload class="upload-demo" :action="uploadUrl" :on-success="handleUploadSuccess" :show-file-list="false"> <el-button slot="trigger" size="small" type="primary">点击上传</el-button> </el-upload> <img v-if="imageUrl" :src="imageUrl" /> </div> </template> <script> export default { data() { return { imageUrl: '', uploadUrl: 'http://localhost:8080/upload' } }, methods: { handleUploadSuccess(response) { this.imageUrl = response.data.url; } } } </script> ``` Spring Boot代码： ``` @RestController public class UploadController { @PostMapping("/upload") public ResponseEntity<String> upload(@RequestParam("file") MultipartFile file) { try { // 保存上传的文件到服务器上 String fileName = file.getOriginalFilename(); String filePath = "path/to/save/" + fileName; File dest = new File(filePath); file.transferTo(dest); // 返回图片的访问地址 String imageUrl = "http://localhost:8080/images/" + fileName; return ResponseEntity.ok(imageUrl); } catch (Exception e) { return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build(); } } } ``` 注意：上述代码仅供参考，具体实现需要根据自己的需求进行适当的修改。