下面是详细的"vue+springboot图片上传和显示的示例代码"攻略:
1. 前端部分
1.1 Vue组件设计
首先,我们需要设计一个Vue组件,用于上传图片。在组件中包含一个input元素和一个button元素,其中input的类型为file,这样用户就可以通过点击button选取图片。
<template>
<div>
<input type="file" @change="onUpload"></input>
<button @click="upload">上传</button>
</div>
</template>
<script>
export default {
data() {
return {
file: null
}
},
methods: {
onUpload(event) {
this.file = event.target.files[0];
},
upload() {
// TODO: 调用后端接口上传图片
}
}
}
</script>
在组件的data属性中,我们定义了一个file属性,用于存储用户选取的图片。在input的change事件中,我们将用户选取的图片保存在file属性中。
在upload方法中,我们需要调用后端接口上传图片。这个接口的具体实现方式,我们在后面再讲。
1.2 使用axios调用后端接口
在Vue组件中,使用axios可以非常方便地调用后端接口。我们需要安装axios,然后在组件中引入axios库。我们在upload方法中使用axios发起POST请求,把用户选取的图片数据发送给后端。
接下来是代码示例:
<script>
import axios from 'axios'
export default {
data() {
return {
file: null
}
},
methods: {
onUpload(event) {
this.file = event.target.files[0];
},
upload() {
let formData = new FormData();
formData.append('file', this.file);
axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log(response.data);
}).catch(error => {
console.log(error);
});
}
}
}
</script>
在这个示例中,我们使用了FormData对象,将用户选取的图片数据与请求一起发送。
1.3 显示图片
当图片上传成功后,我们需要在页面上显示出来。在Vue组件中,我们可以通过绑定img标签的src属性,将后端返回的图片地址显示在页面上。
<template>
<div>
<input type="file" @change="onUpload"></input>
<button @click="upload">上传</button>
<img v-if="imageUrl" :src="imageUrl" />
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
file: null,
imageUrl: null
}
},
methods: {
onUpload(event) {
this.file = event.target.files[0];
},
upload() {
let formData = new FormData();
formData.append('file', this.file);
axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
this.imageUrl = response.data.imageUrl;
}).catch(error => {
console.log(error);
});
}
}
}
</script>
在这个示例中,我们新增加了一个img标签,如果imageUrl属性存在,则显示图片。
2. 后端部分
2.1 SpringBoot文件上传的实现
在后端部分,我们需要实现一个文件上传的接口。这个接口的作用是,将接收到的图片数据进行存储,并返回图片存储的地址。
@RestController
@RequestMapping("/api")
public class FileUploadController {
@Value("${upload.path}")
private String uploadPath;
@PostMapping("/upload")
public ResultVO uploadFile(@RequestParam("file") MultipartFile file) {
String fileName = file.getOriginalFilename();
try {
File targetFile = new File(uploadPath + File.separator + fileName);
file.transferTo(targetFile);
String imageUrl = "http://localhost:8080/images/" + fileName;
return ResultVO.ok(imageUrl);
} catch (IOException e) {
e.printStackTrace();
return ResultVO.error("上传失败");
}
}
}
在这个示例中,我们使用了SpringMVC的注解@RequestParam,获取前端发送的文件数据。利用MultipartFile对象,我们可以获取到文件的原始名称,并将文件存储到指定的路径中。在这个示例中,我们将文件存储在了“upload.path”指定的路径下,最终返回的图片地址为“http://localhost:8080/images/文件名”。
2.2 配置文件上传路径
为了使得文件上传的路径可以进行配置,我们需要在application.yml中进行配置。如下所示:
upload:
path: /usr/local/images
在这个示例中,我们将上传路径指定为“/usr/local/images”。启动项目之后,可以看到文件将保存到这个路径下。
至此,我们完成了"vue+springboot图片上传和显示的示例代码"的详细讲解,希望对您有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue+springboot图片上传和显示的示例代码 - Python技术站