vue+springboot图片上传和显示的示例代码-前端开发

下面是详细的vue+springboot图片上传和显示的示例代码攻略：

下面是详细的"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/文件名”。