SpringBoot+Nginx实现多张图片和参数上传

最新推荐文章于 2025-04-06 07:35:53 发布

Smile浅唱

最新推荐文章于 2025-04-06 07:35:53 发布

阅读量2.6k

点赞数 2

分类专栏： Java 文章标签： SpringBoot 图片上传

本文链接：https://blog.youkuaiyun.com/qq272708698/article/details/87693704

版权

Java 专栏收录该内容

3 篇文章

订阅专栏

SpringBoot+Nginx实现多张图片和参数上传

业务需求，通过上传多张图片给服务器，并且返回访问地址。
废话不多说开搞。

第一步

首先我们要安装Nginx，修改Nginx的config文件
添加如下内容：

location /imgs {
	        root   /Users/xxxx/file;
	        autoindex  on;
	   }

/imgs是你要存放图片的最后一个目录
root 对应的是除开最后一个目录的绝对路径
autoindex on;是运行被浏览器访问

第二步

    public class FoodInfoEntity {
    private String name;
    private String des;
    private MultipartFile[] file;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getDes() {
        return des;
    }

    public void setDes(String des) {
        this.des = des;
    }
    public MultipartFile[] getFile() {
        return file;
    }

    public void setFile(MultipartFile[] file) {
        this.file = file;
    }
    }

这个主要是拿来存放一些前端给我们后台的参数里面包括了图片和文字参数。

第三步

     * 多个图片和多个参数上传
     * @param entity
     * @return
     */
    @PostMapping("/upload")
    @ResponseBody
    public Object upload(FoodInfoEntity entity){
        System.out.println("name "+entity.getName());
        System.out.println("des "+entity.getDes());
        MultipartFile[] files = entity.getFile();
        List<String> imgs=new ArrayList<>();
        for (int i = 0; i <files.length ; i++) {
            System.out.println("file Name "+files[i].getOriginalFilename());
            String fileName = files[i].getOriginalFilename();
            String filePath = FoodConfig.IMAGE_PATH;
            File dest = new File(filePath + fileName);
            try {
                files[i].transferTo(dest);
                imgs.add(FoodConfig.IMAGE_BASE_URL+fileName);
            }catch (Exception e){
                return ResultUtils.error(99,"上传失败");
            }
        }

        return ResultUtils.success(imgs);
}

第四步提交数据测试

H5

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>多文件上传</title>
</head>

<body>
<form method="post" action="/user/upload" enctype="multipart/form-data">
    <input type="text" name="name">
    <input type="text" name="des">

    <input type="file" name="file"><br>
    <input type="file" name="file"><br>
    <input type="file" name="file"><br>

    <input type="submit" value="提交">
</form>

</body>
</html>

Android

因为Android现在的网络请求基本上都是Retrofit+RxJava,所以这里也不例外

    public interface ApiStore {
    String BASE_URL="http://192.168.16.146:8088/";

    @POST("user/login")
    Observable<BaseResult<UserEntity>> login(@Body RequestBody body);
    
    //图片参数上传
    @Multipart
    @POST("user/upload")
    Observable<BaseResult> upload(@Part List<MultipartBody.Part> partLis);
}

因为Android打开相册选择图片需要考虑一些兼容性问题，不是本篇文章的重点，这里只聊网络请求，所以也就只贴一些网络请求相关的代码

    private void uploadImg(File file){
        MultipartBody.Builder builder = new MultipartBody.Builder()
                .setType(MultipartBody.FORM);//表单类型
        RequestBody body=RequestBody.create(MediaType.parse("multipart/form-data"),file);//表单类型

        builder.addFormDataPart("file", file.getName(), body);
        builder.addFormDataPart("file", file.getName(), body);

        builder.addFormDataPart("name","张三");
        builder.addFormDataPart("des","去你大爷的");
        List<MultipartBody.Part> parts=builder.build().parts();
        RetrofitManager.getInstance().create().upload(parts)
                .subscribeOn(Schedulers.newThread())
                .subscribeOn(Schedulers.io())
                .subscribeOn(AndroidSchedulers.mainThread())
                .subscribe(new Observer<BaseResult>() {
                    @Override
                    public void onSubscribe(Disposable d) {

                    }

                    @Override
                    public void onNext(BaseResult baseResult) {
                        Log.e("dandy","success "+baseResult.getMessage());
                    }

                    @Override
                    public void onError(Throwable e) {
                        Log.e("dandy","e "+e.toString());
                    }

                    @Override
                    public void onComplete() {

                    }
                });

    }

这个方法的参数可以是一个File数组，这样就实现多张图片了，我这边方便调试就只选择了一张图片，最后添加两次。

###结语
SpringBoot对上传文件是有大小限制，这里我们可以根据自己的需求进行修改，我这里是使用的yml文件，也就在里面添加。-1代表无限大

    spring:
        http:
            multipart:
            enabled: true
            max-file-size: -1
            max-request-size: -1
    ```


最后附上项目地址 [链接](https://github.com/Smile52/FoodBook) 

因为本人也在开始学习SpringBoot这个项目就是学习使用的Demo，后续会继续更新。