java实现上传多图片至服务器功能（HTML前端+SpringBoot+fastDFS）

目录

1.效果图

2.技术分解

3.实现过程

---

首先，你已经安装好了fastDFS服务器！！如果没有，可以参考这篇博客。

 

1.效果图

功能描述：在web前端选择本地图片上传到服务器上，上传成功后服务器会返回图片存储地址。

2.技术分解

• 在前端表单中获取要上传的图片（input type=file）
• 在后端controller中获取前端表单提交的数据
• 调用service实现把图片上传到fastDFS服务器

3.实现过程

首先在java中配置fastDFS，具体见这篇博客的 3.一个应用小demo

在前端获取到要上传的图片，核心代码如下：

multiple="multiple"  表示这可以上传多个文件

accept="image/jpeg,image/jpg,image/png"  约束了上传的文件类型

<form role="form" method="post" th:action="@{'/dataset/'+${datasetId}+'/uploadImg'}" enctype="multipart/form-data" style="margin-left: 30px; margin-top: 20px;">  
    <h4>添加数据</h4>
    <div style="height: 90px;">
        <input type="file" style="margin: 10px" name="pictureFiles" multiple="multiple" accept="image/jpeg,image/jpg,image/png"><br>
        <button class="btn btn-primary small-btn">确认上传</button>
    </div>
</form>

表单数据提交到：th:action="@{'/dataset/'+${datasetId}+'/uploadImg'}"（用的thymeleaf，所以th:）

SpringBoot后端的Controller接收并实现上传至服务器

核心代码如下：

@RequestMapping("/dataset/{datasetId}/uploadImg")
public String uploadImg(MultipartFile[] pictureFiles,
						@PathVariable(name="datasetId") int datasetId,
						Model model) throws MyException {
        //判断上次的文件是不是空
	if(pictureFiles.length==0 || pictureFiles[0].getOriginalFilename()==null || pictureFiles[0].getOriginalFilename().isEmpty()) {
		ArrayList<Picture> pictures = pictureService.getPicturesByDatasetId(datasetId);
		int pictureCount = pictures.size();
		model.addAttribute("pictures",pictures);
		model.addAttribute("datasetId",datasetId);
		model.addAttribute("pictureCount","共 "+pictureCount+" 个");
		return "data";
	}
	
        //上传图片（详细代码看下面的service里面的代码）
	pictureService.createPictures(pictureFiles,datasetId);

        //获取数据库里面的图片，传递给前端
	ArrayList<Picture> pictures = pictureService.getPicturesByDatasetId(datasetId);
	int pictureCount = pictures.size();
	datasetService.updateFinishedCount(datasetId, pictureCount);
	datasetService.updateCoverCount(datasetId, pictures.get(pictureCount-1).getUrl());
	model.addAttribute("pictures",pictures);
	model.addAttribute("datasetId",datasetId);
	model.addAttribute("pictureCount","共 "+pictureCount+" 个");
	return "data";
}

@Service
public class PictureService {
	@Autowired
	private PictureMapper pictureMapper;
	
	public void createPictures(MultipartFile[] pictureFiles, int datasetId) throws MyException {
		//取文件扩展名列表
	ArrayList<String> extNames = new ArrayList<String>();
	ArrayList<String> originalFilenames = new ArrayList<String>();
	
	for(MultipartFile pictureFile: pictureFiles) {
		String originalFilename = pictureFile.getOriginalFilename();
		String extName = originalFilename.substring(originalFilename.lastIndexOf(".")+1);
		extNames.add(extName);
		originalFilenames.add(originalFilename);
	}
	
	try {
                //连接服务器
		ClientGlobal.init(this.getClass().getResource("/").getPath() + "conf/fastDFS.conf");
		TrackerClient trackerClient = new TrackerClient();
		TrackerServer trackerServer = trackerClient.getConnection();
		StorageServer storageServer = null;
		StorageClient1 storageClient = new StorageClient1(trackerServer, storageServer);
		
		//上传图片，一张一张的上传
		int i=0;
		for(MultipartFile pictureFile: pictureFiles) {
                        //获取图片在服务器存储地址
			String path = storageClient.upload_file1(pictureFile.getBytes(), extNames.get(i), null);
			String url = "http://192.168.25.133/" + path;
                        //把上传了的图片信息存入数据库
			Picture picture = new Picture();
			picture.setDatasetId(datasetId);
			picture.setName(originalFilenames.get(i));
			picture.setUrl(url);
			pictureMapper.createPicture(picture);
			i++;
		}
		
	} catch (IOException e) {
		e.printStackTrace();
	}
}