java spring 图片上传_SpringMVC完成商城系统的商品图片上传功能

前面我们完成了商品类目的选择功能，本篇文章我们要完成商品的图片上传功能，为了完成商品图片上传功能，我们首先搭建了图片服务器并且创建了图片站点。

1、javamall.manager.web项目pom.xml新增commons-fileupload

commons-fileupload

commons-fileupload

pom.xml的具体路径如下图所示

2、SpringMVC配置文件springmvc.xml中新增文件上传解析器，具体代码如下

具体路径如下图所示

3、配置资源文件resource.properties的内容(没有resource.properties文件的，自己新建)FTP_ADDRESS=192.168.68.109

FTP_PORT=21

FTP_USERNAME=sql192_168_68_1

FTP_PASSWORD=PzyP45ynEjdBrBAZ

FTP_BASE_PATH=/www/wwwroot/192.168.68.109_8100

IMAGE_BASE_URL=http://192.168.68.109:8100/

ftp账号如何新建的，可以看下本站的这篇文章：新建java商城系统的图片站点的FTP账号

具体路径如下图所示

4、加载配置文件，来到 applicationContext-dao.xml 文件下，看下context:property-placeholder的配置，如果之前是db.properties改成*.properties，具体代码如下

路径截图如下

5、图片名的生成策略，我们采用“时间+随机数”的方式。

在javamall.common项目下新建名为IDUtil.java的工具类，具体代码如下package com.codingwhy.utils;

import java.util.Random;

public class IDUtil {

/**

* 图片名生成

*/

public static String genImageName() {

//取当前时间的长整形值包含毫秒

long millis = System.currentTimeMillis();

//long millis = System.nanoTime();

//加上三位随机数

Random random = new Random();

int end3 = random.nextInt(999);

//如果不足三位前面补0

String str = millis + String.format("%03d", end3);

return str;

}

}

具体路径如下图所示

6、项目javamall.manager.service下新增接口PictureService，具体代码如下package com.codingwhy.service;

import org.springframework.web.multipart.MultipartFile;

import java.util.Map;

public interface PictureService {

Map uploadPicture(MultipartFile uploadFile);

}

具体路径如下图所示

7、新建接口PictureService的实现类PictureServiceImpl，具体代码如下package com.codingwhy.service.impl;

import com.codingwhy.service.PictureService;

import com.codingwhy.utils.FtpUtil;

import com.codingwhy.utils.IDUtil;

import org.joda.time.DateTime;

import org.springframework.beans.factory.annotation.Value;

import org.springframework.stereotype.Service;

import org.springframework.web.multipart.MultipartFile;

import java.util.HashMap;

import java.util.Map;

@Service

public class PictureServiceImpl  implements PictureService {

@Value("${FTP_ADDRESS}")

private String FTP_ADDRESS;

@Value("${FTP_PORT}")

private Integer FTP_PORT;

@Value("${FTP_USERNAME}")

private String FTP_USERNAME;

@Value("${FTP_PASSWORD}")

private String FTP_PASSWORD;

@Value("${FTP_BASE_PATH}")

private String FTP_BASE_PATH;

@Value("${IMAGE_BASE_URL}")

private String IMAGE_BASE_URL;

@Override

public Map uploadPicture(MultipartFile uploadFile) {

Map resultMap = new HashMap<>();

try {

//生成一个新的文件名

//取原始文件名

String oldName = uploadFile.getOriginalFilename();

//生成新文件名

//UUID.randomUUID();

String newName = IDUtil.genImageName();

newName = newName + oldName.substring(oldName.lastIndexOf("."));

//图片上传

String imagePath = new DateTime().toString("/yyyy/MM/dd");

boolean result = FtpUtil.uploadFile(FTP_ADDRESS, FTP_PORT, FTP_USERNAME, FTP_PASSWORD,

FTP_BASE_PATH, imagePath, newName, uploadFile.getInputStream());

//返回结果

if(!result) {

resultMap.put("error", 1);

resultMap.put("message", "文件上传失败");

return resultMap;

}

resultMap.put("error", 0);

resultMap.put("url", IMAGE_BASE_URL + imagePath + "/" + newName);

return resultMap;

} catch (Exception e) {

resultMap.put("error", 1);

resultMap.put("message", "文件上传发生异常");

return resultMap;

}

}

}

具体路径如下图所示

8、在javamall.manager.web项目下新建PictureController类，具体代码如下package com.codingwhy.controller;

import com.codingwhy.service.PictureService;

import com.codingwhy.utils.JsonUtil;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.multipart.MultipartFile;

import java.util.Map;

@Controller

public class PictureController {

@Autowired

private PictureService pictureService;

@RequestMapping("/pic/upload")

@ResponseBody

public String pictureUpload(MultipartFile uploadFile) {

Map result = pictureService.uploadPicture(uploadFile);

//为了保证功能的兼容性，需要把Result转换成json格式的字符串。

String json = JsonUtil.objectToJson(result);

return json;

}

}

具体路径如下图所示

9、此次项目偏重于后端，前端的代码我就不贴出来，大家看下js就行，还是比较简单的。

通过以上的步骤就完成了图片的上传功能，我们打开后台测试下

单击上传后可以看到图片上传成功了

我们打开宝塔面板可以看到图片站点目录下也有上传的图片了

另外本篇文章用到了2个工具类，ftp和json的，可以看下本站的以下2篇文章