使用springboot简单实现下载图片的功能

本文介绍了如何使用SpringBoot来实现一个简单的图片下载功能。在后台配置中,通过设置静态资源路径和端口,使得系统能够根据前端提供的图片路径找到对应的文件。在前台,用户可以通过访问特定URL上传图片,并在页面上预览,点击图片可以触发下载,用户可以选择下载路径完成文件下载。
摘要由CSDN通过智能技术生成

使用springboot简单实现下载图片的功能

后台

@Controller
public class IndexController {
   
    @Value("${my-config.file-path}")
    private String myFilePath;

    @RequestMapping("test")
    public String test() {
   
        return "index";
    }

    @RequestMapping("upload")
    public String upload(@RequestParam("file") MultipartFile file, Model model, HttpServletRequest req) {
   
        try {
   
            String fileName = System.currentTimeMillis()+file.getOriginalFilename();
            String destFileName=myFilePath+"uploaded"+ File.separator+fileName;

            File destFile = new File(destFileName);
            if (!destFile.getParentFile().exists()) {
   
                destFile.getParentFile().mkdirs();
            }
            file.transferTo(destFile);
            model.addAttribute("filename","uploaded/"+fileName);
        } catch (FileNotFoundException e) {
   
            e.printStackTrace();
            return "上传失败," + e.getMessage();
        } catch (IOException e) {
   
            e.printStackTrace();
            return "上传失败," + e.getMessage();
        }
        return "index";
    }

    @ResponseBody
    @GetMapping("/download")
    public String downloadImage(@RequestParam(value = "imageName",required = false) String filename, HttpServletRequest request, HttpServletResponse response) throws IOException {
   
可以使用Spring Boot和Vue.js来实现图片上传功能。下面是一个基本的示例: 在Spring Boot端,你可以使用`@PostMapping`注解来创建一个处理图片上传请求的控制器方法。你需要使用`MultipartFile`类型的参数来接收上传的文件。然后,你可以使用`transferTo()`方法将文件保存到服务器的指定位置。 ```java @RestController public class UploadController { @PostMapping("/upload") public String uploadFile(@RequestParam("file") MultipartFile file) { try { // 获取文件的字节数组 byte[] bytes = file.getBytes(); // 在这里处理文件保存的逻辑,比如保存到数据库或者文件系统中 return "上传功"; } catch (IOException e) { e.printStackTrace(); return "上传失败"; } } } ``` 在Vue.js端,你可以使用`vue-axios`库来发送文件上传请求。首先,你需要引入必要的依赖和配置: ```javascript // main.js import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) ``` 然后,在Vue组件中,你可以创建一个文件选择器,并在选择文件后将其发送到服务器: ```html <template> <div> <input type="file" @change="handleFileUpload"> <button @click="uploadFile">上传</button> </div> </template> <script> export default { data() { return { file: null } }, methods: { handleFileUpload(event) { this.file = event.target.files[0] }, uploadFile() { let formData = new FormData() formData.append('file', this.file) this.axios.post('/upload', formData) .then(response => { console.log(response.data) }) .catch(error => { console.log(error) }) } } } </script> ``` 这样,当你选择文件并点击上传按钮时,Vue组件会将文件发送到Spring Boot端的上传接口。 请注意,以上只是一个简单的示例,你可能还需要添加一些额外的逻辑来处理文件的保存、文件格式的验证等。此外,你还可以使用一些第三方库来简化文件上传的流程,比如`vue-upload-component`或`element-ui`等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值