SpringBoot实现图片上传

以你之姓@ 2022-08-28 06:53 361阅读 0赞

## 图片上传 ##

原本以为图片上传很难，没想到有框架之后这么简单。  
使用MultipartFile+input标签就可以了。

**建议：图片上传服务器方面最好使用多图上传接口，因为多图上传接口也可以上传单图。如果业务要求限制只能上传单图，这样前后端都要限制才使用单图模式。**

前端：（使用post请求，设置enctype=“multipart/form-data”）

//单文件上传
    <form action="upload" method="post" enctype="multipart/form-data">//这个文件类型很重要
        <input type="file" name="img" >
        <input type="submit" >
    </form>
    
    //多文件上传,multiple是区别所在
    <form action="upload" method="post" enctype="multipart/form-data">//这个文件类型很重要
        <input type="file" name="img" multiple="multiple">
        <input type="submit" >
    </form>

后端：

package com.yumoxuan.controller;
    
    import com.yumoxuan.pojo.User;
    import com.yumoxuan.service.LoginService;
    import com.yumoxuan.service.ManagerService;
    import com.yumoxuan.service.impl.LoginServiceImpl;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.http.HttpRequest;
    import org.springframework.util.ResourceUtils;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.multipart.MultipartFile;
    import javax.servlet.http.HttpServletRequest;
    import java.io.File;
    import java.io.FileNotFoundException;
    import java.io.IOException;
    import java.util.HashMap;
    import java.util.List;
    import java.util.UUID;
    
    @RestController
    public class ManagerController {
        
        @Autowired
        LoginService loginService;
        @Autowired
        ManagerService managerService;
        //单图片上传
        @RequestMapping("/upload")
        public HashMap upload(MultipartFile img){
        
            HashMap map=new HashMap();
            String url=System.getProperty("user.dir");//获取项目绝对路径
            if(!img.isEmpty()){
        
                UUID id=UUID.randomUUID();//生成文件名
                try {
        
                	//参数就是图片保存在服务器的本地地址
                    img.transferTo(new File(url+"\\src\\main\\resources\\static\\images\\"+id+".png"));
                    map.put("url","localhost:8080/images/"+id+".png");
                    return map;
                } catch (IOException e) {
        
                    e.printStackTrace();
                }
                map.put("url","上传失败");
                return map;
            }
            map.put("url","上传失败");
            return map;
        }
    
      /**
         * 多文件上传,返回图片路径数组
         * 建议使用这种，因为这种可以上传单张图片，也可以上传多张图片
         * 限制单张图片的在前端限制就行
         * @param img
         * @return
         */
        @RequestMapping("/uploads")
        public ArrayList upload(MultipartFile[] img){
        
            String url=System.getProperty("user.dir");//获取项目路径
            ArrayList list=new ArrayList();
            if(img.length!=0){
        
                for(MultipartFile file:img){
        
                    UUID id=UUID.randomUUID();
                    try {
        
                        file.transferTo(new File(url+"\\src\\main\\resources\\static\\images\\"+id+".png"));
                        list.add("localhost:8080/images/"+id+".png");
                    } catch (IOException e) {
        
                        e.printStackTrace();
                    }
                }
                return list;
            }
            return list;
        }
    }

## 图片上传之后无法访问 ##

图片上传之后，是保存在服务器本地，虽然我选择的文件夹在项目里面，但是和放在本地还是差不多。  
而服务器是有保护机制的，用户不可以随意访问服务器的本地文件，因此需要做一个虚拟映射。把服务器本地地址映射到项目地址，这样就可以访问上传的图片。

@Configuration
    public class AdminWebConfig implements WebMvcConfigurer {
        
        //手动注入LoginService对象
        @Bean
        public LoginInterceptor setBean2(){
        
            return new LoginInterceptor();
        }
        @Override
        public void addInterceptors(InterceptorRegistry registry) {
        
            registry.addInterceptor(setBean2())
                    .addPathPatterns("/**")
                    .excludePathPatterns("/get","/gettoken","/images/**","/hello.html","/upload","/uploads");
        }
    
        /**
         * 图片虚拟地址映射
         * @param registry
         */
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
        
            registry.addResourceHandler("/images/**")
                    .addResourceLocations("file:" + System.getProperty("user.dir")+"\\src\\main\\resources\\static\\images\\");
        }
    }

第一个参数是项目图片的虚拟地址（访问用），第二个参数是图片在服务器的本地地址。

这个问题参考了这位大大的博客：  
[https://blog.csdn.net/weixin\_44657749/article/details/109380831][https_blog.csdn.net_weixin_44657749_article_details_109380831]

[https_blog.csdn.net_weixin_44657749_article_details_109380831]: https://blog.csdn.net/weixin_44657749/article/details/109380831