Springboot实现多张图片上传的功能

Springboot中的服务层service:

@Service
public class UploadServiceImpl implements UploadService {

    private  final static String rootPath = "C:/attachment/";

    @Override
    public List<Image> upload(MultipartFile[] multipartFiles) {
        File fileDir = new File(rootPath);
        if (!fileDir.exists() && !fileDir.isDirectory()) {
            fileDir.mkdirs();
        }
        List<Image> list = new ArrayList<>();
        try {
            if (multipartFiles != null && multipartFiles.length > 0) {
                for(int i = 0;i<multipartFiles.length;i++){
                    try {
                        //uuid生成文件名
                        String fileName = UUID.randomUUID().toString();
                        //组合完整路经
                        String storagePath = rootPath+fileName+getFileExtension(multipartFiles[i].getOriginalFilename());
                        System.out.println("上传的文件:" + multipartFiles[i].getName() + "," +
                                multipartFiles[i].getContentType() + "," + multipartFiles[i].getOriginalFilename()
                                +",保存的路径为:" + storagePath+i);
                        Path path = Paths.get(storagePath);
                        //将文件保存到本地文件夹中
                        Files.write(path,multipartFiles[i].getBytes());
                        Image image = new Image(multipartFiles[i].getOriginalFilename(),storagePath);
                        list.add(image);
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        //向前端返回一个图片列表
        return list;
    }
    //获取文件的后缀
    private String getFileExtension(String fileName) {
        int dotIndex = fileName.lastIndexOf(".");
        if (dotIndex >= 0 && dotIndex < fileName.length() - 1) {
            return fileName.substring(dotIndex);
        }
        return "";
    }
}

实体类image.java

import lombok.Data;

@Data
public class Image {
    String name;
    String url;
    public  Image(String name,String url){
        this.name = name;
        this.url = url;
    }
}

控制层controller:

@RestController
@RequestMapping("/api/file")
public class UploadController {
    @Resource
    UploadService uploadService;

    @RequestMapping("/upload")
    Object uploadImage(@RequestParam("file") MultipartFile[] multipartFiles){
        return uploadService.upload(multipartFiles);
    }

}

postman测试:

 本地文件夹:

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用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、付费专栏及课程。

余额充值