ssm框架实现图片上传并在页面显示以及保存文件地址到数据库

本案例是通过springmvc+spring+mybatis框架以商品上传为例，实现的图片上传功能，并把图片的地址保存到数据库并在前台显示上传的图片。tomcat服务器配置图片路径在最下边，也可以参考我之前的tomcat配置虚拟路径保存、访问图片

项目结构如下：

相关配置自行搜索，下边直接实现上传功能

1、创建数据库

DROP TABLE IF EXISTS `product`;
CREATE TABLE `product` (
  `pid` int(11) NOT NULL AUTO_INCREMENT,
  `pimage` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`pid`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
 
-- ----------------------------
-- Records of product
-- ----------------------------
INSERT INTO `product` VALUES ('2', '6c648d82-dc29-4b92-855e-491741e092a21.jpg');
INSERT INTO `product` VALUES ('3', '80f26905-7342-492c-be6e-c3f0ad81c2aa1.jpg');
INSERT INTO `product` VALUES ('4', 'c3d28f16-4b17-4568-8877-ff1fd4e514a31.jpg');
INSERT INTO `product` VALUES ('5', 'bb8070e8-5b3f-4be2-83d6-698dd6169dca');

2、创建商品实体类product

public class Product {
    private Integer pid; //商品id
    private String pimage; //商品图片
    public Integer getPid() {
        return pid;
    }
    public void setPid(Integer pid) {
        this.pid = pid;
    }
    public String getPimage() {
        return pimage;
    }
    public void setPimage(String pimage) {
        this.pimage = pimage;
    }
    @Override
    public String toString() {
        return "Product [pid=" + pid + ", pimage=" + pimage + "]";
    }

3、创建ProductMapper接口

public interface ProductMapper {
    //保存商品
    void save(Product product);
    //查询商品
    List list();
}

4、创建ProductMapper.xml

    
    
    
        insert into product(pimage) values (#{pimage})    
     
    
    
    
        select * from product
     

5、创建接口ProductService

package com.ssm.service;

import java.util.List;

import com.ssm.entity.Product;

public interface ProductService {

    List list();

    void save(Product product);

}

6、创建实现类ProductServiceImpl

@Service
@Transactional
public class ProductServiceImpl implements ProductService {
    //注入ProductMapper
    @Autowired
    private ProductMapper productMapper;
    
    @Override
    public List list() {
        
        return productMapper.list();
    }

    @Override
    public void save(Product product) {
        productMapper.save(product);
    }
}

7、创建ProductController

@Controller
public class ProductController {
    //注入ProductService
    @Autowired
    private ProductService productService;
    
    //查询
    @RequestMapping("/list.do")
    public String listUser( Model model){
        List list= productService.list();
        model.addAttribute("list",list);
        System.out.println(list);
        return "list";
    }
    
    /**
     * 保存商品
     * @param image
     * @param product
     * @param map
     * @return
     * @throws IOException
     */
    @RequestMapping("/addProduct.do")
    public String fileUpload(MultipartFile file,Product product, ModelMap map) throws IOException {

        /**
         * 上传图片
         */
        //图片上传成功后，将图片的地址写到数据库
        String filePath = "E:\\upload";//保存图片的路径,tomcat中有配置
        //获取原始图片的拓展名
        String originalFilename = file.getOriginalFilename();
        //新的文件名字，使用uuid随机生成数+原始图片名字，这样不会重复
        String newFileName = UUID.randomUUID()+originalFilename;
　      //封装上传文件位置的全路径，就是硬盘路径+文件名
        File targetFile = new File(filePath,newFileName); 
　　    //把本地文件上传到已经封装好的文件位置的全路径就是上面的targetFile
        file.transferTo(targetFile);
        product.setPimage(newFileName);//文件名保存到实体类对应属性上
        
        /**
         * 保存商品
         */
        productService.save(product);
        return "redirect:/list.do"; //重定向到查询
    }
}

8、首页index.jsp

    

        图片：
        
    

9、显示列表list.jsp，这里使用的是jstl遍历

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>










    
            

        

            
序号
            
图片
            
        
        

                
${product.pid }
                

                    
                 
          
            
        
    

如下：

上述src中的/image就是在tomcat中设置的本地路径，后边${product.pimage }就是路径下的地址对应的图片

10、最后说一下我的图片上传保存的位置是在本地，我是通过tomcat进行设置的，如下图：

tomcat配置.png