1. 在
前端页面
中，
使用Vue组件上传
图片，可以
使用Vue-Upload-Component插件。
2. 在后端Spring Boot
中，将上传的
图片保存在本地磁盘
中，可以
使用Spring Boot的MultipartFile接口。
3. 在
前端页面
中，将上传的
图片显示在网页
中，可以
使用Vue.js的v-bind指令和img标签。
具体步骤如下：
1. 在
前端页面
中，安装并引入
Vue-Upload-Component插件。
```
npm install
vue-upload-component --save
```
2. 在
Vue组件
中使用Vue-Upload-Component插件，设置上传的URL和参数。如下：
```
<template>
<div>
<
vue-upload-component
:url="uploadUrl"
:params="uploadParams"
@upload-success="onUploadSuccess"
>
<button>Upload</button>
</
vue-upload-component>
</div>
</template>
<script>
import
VueUploadComponent from '
vue-upload-component';
export default {
components: {
VueUploadComponent },
data() {
return {
uploadUrl: '/api/upload',
uploadParams: { },
};
},
methods: {
onUploadSuccess(response) {
// handle success
},
},
};
</script>
```
3. 在Spring Boot
中，
使用MultipartFile接口处理上传的文件，保存到本地磁盘
中。如下：
```
@RestController
@RequestMapping("/api")
public class FileUploadController {
@PostMapping("/upload")
public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) {
try {
// Save file to local disk
String filename = StringUtils.cleanPath(file.getOriginalFilename());
Path filePath = Paths.get("uploads").resolve(filename);
Files.copy(file.getInputStream(), filePath, StandardCopyOption.REPLACE_EXISTING);
return ResponseEntity.ok("File uploaded successfully!");
} catch (IOException ex) {
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Failed to upload file!");
}
}
}
```
4. 在
前端页面
中，
使用v-bind指令将上传的
图片显示在img标签
中。如下：
```
<template>
<div>
<
vue-upload-component
:url="uploadUrl"
:params="uploadParams"
@upload-success="onUploadSuccess"
>
<button>Upload</button>
</
vue-upload-component>
<img :src="
imageUrl" />
</div>
</template>
<script>
import
VueUploadComponent from '
vue-upload-component';
export default {
components: {
VueUploadComponent },
data() {
return {
uploadUrl: '/api/upload',
uploadParams: { },
imageUrl: '',
};
},
methods: {
onUploadSuccess(response) {
this.
imageUrl = response.data.url;
},
},
};
</script>
```
其
中，
imageUrl是一个data属性，用来保存上传的
图片在服务器上的URL。在onUploadSuccess方法
中，将上传成功后返回的URL赋值给
imageUrl，然后
使用v-bind指令将
imageUrl绑定到img标签的src属性上，即可在网页
中显示上传的
图片。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
