springmvc实现多图片上传

男娘i 2022-05-25 13:42 349阅读 0赞

### springmvc实现多图片上传： ###

#### 主要是项目要做的是一个发表分享的功能，就有点像微信发朋友圈那样，一个内容文字和图片显示。    ####

#### 思路：用form表单提交，在form表单选择多张图片，有文字说明，后台springmvc接受数据。接受数据有文字，有多张图片，有是谁发表分享的用户id。那就用一个类把这些数据封装起来；之后把这些数据存到数据库里。 ####

#### 工具：IDEA ####

#### 数据库：mysql ####

#### 页面：jsp ####

![70][]

前端页面：

<div class="col-sm-6 col-xs-12 my_edit" >
        <div class="row" id="edit_form" >
            <span class="pull-left" style="margin:15px;">编写新鲜事</span>
            <span class="tips pull-right" style="margin:15px;"></span>
            <form role="form" id="fileform" action="<%=request.getContextPath()%>/upload/uploadfiles" method="post" enctype="multipart/form-data" style="margin-top: 50px;">
                <div class="form-group">
                    <div class="col-sm-12"  >
    
                            <textarea id="content"  name="content" rows="2" cols="20" style="width: 343px;height: 95px"></textarea>
                    </div>
                    <input type="hidden" name="userid" value="user19@qq.com">
                    <br>
                    <div id="spu_img">
                        <div id="spu_img_div_0" style="border:1px solid #333;width:80px;height:80px;float:left;">
                            <img id = "img_0" style="cursor:pointer" src="<%=request.getContextPath()%>/public/content/publishContent/img/pic.png" width="80px" height="80px" οnclick="spu_add_img_click(0)"/>
                            <input id="file_0"  type="file" name="files" style="display:none;" onChange="spu_add_img_change(0)" /><br>
                        </div>
                    </div>
                    <div class="col-sm-12" style="margin-top: 12px;">
                        <button class="btn btn-default btn-search" name="search" type="submit" οnclick="search()">发布</button>
                    </div>
                </div>
            </form>
        </div>

使用js通过点击图片来显示我们选择的图片

#### 点击发布把数据发到后台，springmvc接受数据。把userid,content,files封装成一个ContentByImg类，让springmvc通过自动注入方式获取从前端页面传过来的值 ####

public class ContentByImg implements Serializable {
        private String userid;
        private String content;
        private MultipartFile[] files;
    
        public ContentByImg() {
        }
    
        public String getUserid() {
            return userid;
        }
    
        public void setUserid(String userid) {
            this.userid = userid;
        }
    
        public String getContent() {
            return content;
        }
    
        public void setContent(String content) {
            this.content = content;
        }
    
        public MultipartFile[] getFiles() {
            return files;
        }
    
        public void setFiles(MultipartFile[] files) {
            this.files = files;
        }
    
        @Override
        public String toString() {
            return "ContentByImg{" +
                    "userid='" + userid + '\'' +
                    ", content='" + content + '\'' +
                    ", files.sieze()=" + files.length +
                    '}';
        }
    }

#### springmvc后台处理，对应多张图片又有一个文件处理类来处理，处理完返回图片的名字集合，因为数据库的content表设计的是放3张图片，所以要用一个数组把多张图片的名字插入数据表中。 ####

/**
     * 文件上传处理
     * Created by ASUS on 2018/5/10
     *
     * @Authod Grey Wolf
     */
    import java.io.File;
    import java.util.List;
    
    import net.stxy.one.model.Content;
    import net.stxy.one.model.ContentByImg;
    import net.stxy.one.model.Page;
    import net.stxy.one.service.ContentService;
    import net.stxy.one.utils.FileUtils;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.multipart.MultipartFile;
    import org.springframework.web.servlet.ModelAndView;
    
    @Controller
    @RequestMapping("/upload")
    public class UploadController {
    
        @Autowired
        private FileUtils fileUtils;
    
        @Autowired
        private ContentService contentService;
    
    
    
        @RequestMapping("uploadfiles")
        public String uploadfiles(ContentByImg contentByImg,Model model) {
            System.out.println("---content:0"+contentByImg.toString());
            // 上传图片，返回图片名称集合
            List<String> list_image = fileUtils.getImgPath(contentByImg.getFiles());
            String []pic=new String[3];
            int i=0;
            for (String s:list_image){
                System.out.println("filename:"+s);
                pic[i++]=s;
            }
            Content content1=new Content();
            content1.setPic1(pic[0]);
            content1.setPic2(pic[1]);
            content1.setPic3(pic[2]);
            content1.setContent(contentByImg.getContent());
            content1.setUserid(contentByImg.getUserid());
        //把数据插入到数据库content表中
        contentService.insertContent(content1);
    
            Page page=new Page(3,0);
        //查询数据库content表，获取结果集合，在页面显示刚才发布的信息，图片
        List<Content>listCotent=contentService.selectPageList(page);
            model.addAttribute("listContent",listCotent);
            return "index";
        }
    
    }

/**
     * Created by IntelliJ IDEA
     * User: Litongxue
     * Time: 2018/5/2
     * Description: TODO 文件操作工具类
     */
    @Component
    public class FileUtils {
    
        //文件储存路径
        private final static String UPLOADURL="C:\\Users\\ASUS\\Pictures\\SharedImageServer\\contentpic\\";
    
        public String createFileName(String originalFilename) {
            String hzm = originalFilename.split("\\.")[1];
            return UUID.randomUUID().toString().replace("-", "") + "." + hzm;
        }
    
        public  String getFileName(String originalFilename){
            String fileName=String.valueOf(System.currentTimeMillis()) + "." + originalFilename;
            return fileName;
        }
        public List getImgPath(MultipartFile[] files) {
            List<String> list = new ArrayList<>();
    //        String uploadUrl = "C:\\Users\\ASUS\\Pictures\\SharedImageServer\\contentpic\\";
            for (MultipartFile file : files) {
                if("".equals(file.getOriginalFilename())){
                    continue;
                }
                //获取上传图片的文件名,变为时间+图片名
                String fileName = getFileName(file.getOriginalFilename());
                System.out.println("filename:" + fileName);
                String filePath = UPLOADURL + fileName;
                //创建文件对象
                File tagetFile = new File(UPLOADURL + fileName);
                list.add(fileName);
                //文件名不存在 则新建文件，并将文件复制到新建文件中
                if (!tagetFile.exists()) {
                    try {
                        tagetFile.createNewFile();
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                    try {
                        //保存图片
                        file.transferTo(tagetFile);
                    } catch (IllegalStateException e) {
                        e.printStackTrace();
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }
            for (String s : list) {
                System.out.println("s;::" + s);
            }
            return list;
        }
    
    }

### why:为什么是把图片名字插进去，而不是把图片的全路径插进去呢？ ###

#### 因为我选择的不是把多张图片直接传到我的项目文件夹下，而是选择存到电脑其他盘的文件下，所以选择使用nginx作为图片服务器，只要打开nginx服务器，那么jsp页面的图片路径src=nginx设置的路径+数据库存的图片名字就可以显示了。 ####

### 不会搭建图片服务器可以看看：[Windows实现nginx作为图片服务器][Windows_nginx]    ###

我的座右铭：不会，我可以学；落后，我可以追赶；跌倒，我可以站起来；我一定行。

[70]: /images/20220525/0e265739e13641329dbeb8db0d2351da.png
[Windows_nginx]: https://blog.csdn.net/weixin_39220472/article/details/80330972