本案例是通过springmvc+spring+mybatis框架以商品上传为例,实现的图片上传功能,并把图片的地址保存到数据库并在前台显示上传的图片。
本项目是使用maven搭建的项目,首先看下项目结构
相关配置自行搜索,下边直接实现上传功能
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 classProduct {privateInteger pid;privateString pimage;publicInteger getPid() {returnpid;
}public voidsetPid(Integer pid) {this.pid =pid;
}publicString getPimage() {returnpimage;
}public voidsetPimage(String pimage) {this.pimage =pimage;
}
@OverridepublicString toString() {return "Product [pid=" + pid + ", pimage=" + pimage + "]";
}
3.创建ProductController
@Controllerpublic classProductController {//注入ProductService
@AutowiredprivateProductService productService;//查询所有用户
@RequestMapping("/list.do")publicString listUser( Model model){
List list=productService.list();
model.addAttribute("list",list);
System.out.println(list);return "list";
}/*** 保存商品
*@paramimage
*@paramproduct
*@parammap
*@return*@throwsIOException*/@RequestMapping("/addProduct.do")public String fileUpload(MultipartFile file,Product product, ModelMap map) throwsIOException {/*** 上传图片*/
//图片上传成功后,将图片的地址写到数据库
String filePath = "E:\\upload";//保存图片的路径//获取原始图片的拓展名
String originalFilename =file.getOriginalFilename();//新的文件名字
String newFileName = UUID.randomUUID()+originalFilename;
//封装上传文件位置的全路径
File targetFile= newFile(filePath,newFileName);
//把本地文件上传到封装上传文件位置的全路径
file.transferTo(targetFile);
product.setPimage(newFileName);/*** 保存商品*/productService.save(product);return "redirect:/list.do";
}
}
4.创建接口ProductService
packagecom.ssm.service;importjava.util.List;importcom.ssm.entity.Product;public interfaceProductService {
Listlist();voidsave(Product product);
}
5.创建实现类ProductServiceImpl
@Service
@Transactionalpublic class ProductServiceImpl implementsProductService {//注入ProductMapper
@AutowiredprivateProductMapper productMapper;
@Overridepublic Listlist() {returnproductMapper.list();
}
@Overridepublic voidsave(Product product) {
productMapper.save(product);
}
}
6.创建Mapper接口
public interfaceProductMapper {//保存商品
voidsave(Product product);//查询商品
Listlist();
}
7.创建Mapper.xml
insert into product(pimage) values (#{pimage})
select*from product
8.首页index.jsp
图片:
9.显示列表list.jsp
Insert title here#images{width:50px;height:50px;
}
序号图片${product.pid }最后说一下我的图片上传保存的位置是在本地,我是通过tomcat进行设置的,如下图:
图片上传过程完成。
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‘);