SpringMVC+MongoDB+Layui實現檔案的上傳、下載、刪除功能
阿新 • • 發佈：2019-09-05
應專案要求，使用MongoDB的GridFS來儲存檔案資料。
需求點：1、要求可實現多檔案上傳；2、可以動態新增、刪除檔案列表中的檔案；3、使用檔案ID下載；4、支援跨域；
提示：SpringMVC在4.2版本中有快捷的跨域處理方式@CrossOrigin
第一步：使用LayUI的upload控制元件編寫JSP頁面。
<div class="layui-form-item"> <label class="layui-form-label">附件說明</label> <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal" id="selectAttachment">選擇多檔案</button> <button type="button" class="layui-btn" id="uploadAttachments">開始上傳</button> <div class="layui-upload-list"> <table class="layui-table"> <thead> <tr><th>檔名</th><th>大小</th><th>狀態</th><th>操作</th></tr> </thead> <tbody id="attachmentList"></tbody> </table> </div> <input type="hidden" name="attachDownloadUrls" id="attachDownloadUrls"/> </div> </div>
第二步：編寫JS程式碼
<script> var file_server_url = "http://localhost:8099"; layui.use(['form', 'upload','layer'], function(){ var form = layui.form ,layer = layui.layer ,upload = layui.upload; var attachDownloadUrls = [];//檔案下載路徑陣列 var fileCount = 0;//當前檔案的數量 //多檔案列表示例 var demoListView = $('#attachmentList'),uploadListIns = upload.render({ elem: '#selectAttachment' ,url: file_server_url+'/attachment/upload' ,accept: 'file' ,multiple: true ,auto: false ,data:{'applyCode':$("#applyCode").val()}//額外的引數 ,bindAction: '#uploadAttachments' ,choose: function(obj){ var files = this.files = obj.pushFile(); //將每次選擇的檔案追加到檔案佇列 //讀取本地檔案 obj.preview(function(index, file, result){ var tr = $(['<tr id="upload-'+ index +'">' ,'<td>'+ file.name +'</td>' ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>' ,'<td>等待上傳</td>' ,'<td>' ,'<button class="layui-btn layui-btn-xs attach-reload layui-hide">重傳</button>' ,'<button class="layui-btn layui-btn-xs layui-btn-danger attach-remove">移除</button>' ,'</td>' ,'</tr>'].join('')); //單個重傳 tr.find('.attach-reload').on('click', function(){ obj.upload(index, file); }); //刪除 tr.find('.attach-remove').on('click', function(){ delete files[index]; //刪除對應的檔案 tr.remove(); uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免刪除後出現同名檔案不可選 }); demoListView.append(tr); }); } ,done: function(res, index, upload){ if(res.code == 0){ //上傳成功 attachDownloadUrls.push(res.data.src); fileCount++; var tr = demoListView.find('tr#upload-'+ index),tds = tr.children(); tds.eq(2).html('<span style="color: #5FB878;">上傳成功</span>'); tds.eq(3).html('<button type="button" data-id='+res.data.fileId+'_'+fileCount+' class="layui-btn layui-btn-xs layui-btn-danger attach-delete">刪除</button>'); //清空操作 //刪除 tr.find('.attach-delete').on('click', function(){ var dataSetId = this.dataset.id; var dataArray = dataSetId.split('_'); $.ajax({ type : "POST", url : file_server_url+"/attachment/delete", data : "fileId="+dataArray[0], success : function(result){ if(result.code==0){ setTimeout(function(){ layer.msg("檔案刪除成功！"); attachDownloadUrls.splice(fileCount-1,1);//刪除檔案URL tr.remove(); },2000); }else{ alert(result.msg); } } }); }); return delete this.files[index]; //刪除檔案佇列已經上傳成功的檔案 } this.error(index, upload); } ,error: function(index, upload){ var tr = demoListView.find('tr#upload-'+ index) ,tds = tr.children(); tds.eq(2).html('<span style="color: #FF5722;">上傳失敗</span>'); tds.eq(3).find('.attach-reload').removeClass('layui-hide'); //顯示重傳 } }); //......其他操作 }); </script>
第三步：使用SpringMVC+MongDB+GridFS處理檔案上傳、下載、刪除操作
1）applicationContext-dao.xml檔案配置。(此檔案還可以使用Properties檔案進行配置，亦可以再豐富mongo的相關屬性）
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:context="http://www.springframework.org/schema/context" xmlns:p="http://www.springframework.org/schema/p" xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mongo="http://www.springframework.org/schema/data/mongo" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-4.0.xsd http://www.springframework.org/schema/data/mongo http://www.springframework.org/schema/data/mongo/spring-mongo-1.8.xsd"> <!-- 資料庫連線池 --> <!-- 載入配置檔案 --> <context:property-placeholder location="classpath:resource/*.properties" /> <mongo:db-factory id="mongoDbFactory" dbname="health_file" host="127.0.0.1" port="27017" /> <mongo:mapping-converter id="mongoConveter" db-factory-ref="mongoDbFactory"/> <mongo:gridFsTemplate id="gridFsTemplate" converter-ref="mongoConveter" db-factory-ref="mongoDbFactory"/> </beans>
2）application-service.xml的配置。
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd
http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd
http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-4.0.xsd">
<context:component-scan base-package="com.hy.health.file.service" />
</beans>3）springmv.xml檔案的配置。
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
<context:component-scan base-package="com.hy.health.file.web"/>
<mvc:annotation-driven />
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>
<!-- 定義檔案上傳解析器 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 設定預設編碼 -->
<property name="defaultEncoding" value="UTF-8"></property>
<!-- 設定檔案上傳的最大值5MB，5*1024*1024 -->
<property name="maxUploadSize" value="5242880"></property>
</bean>
</beans>4）編寫業務層介面，主要包括以下幾個方法。
public interface IFileService {
ResponseResult storeUploadFile(MultipartFile file, String applyCode);
ResponseEntity<InputStreamResource> attachmentDownload(String fileId);
ResponseResult attachmentList(String applyCode);
ResponseResult attachmentDelete(String fileId);
}5）編寫業務層實現類。
@Service
public class FileService implements IFileService {
@Autowired
GridFsTemplate gridFsTemplate;
@Value("${FILE_SERVER_BASEURL}")
private String FILE_SERVER_BASEURL;
@Override
public ResponseResult storeUploadFile(MultipartFile file, String applyCode) {
DBObject metadata = new BasicDBObject();
metadata.put("applyCode", applyCode);
metadata.put("originalFilename", file.getOriginalFilename());//儲存原始的檔名
metadata.put("contentType", file.getContentType());
String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
String fileName = IDUtils.genItemId() + suffix;//處理儲存的檔名字
GridFSFile gridFSFile = null;
try {
gridFSFile = gridFsTemplate.store(file.getInputStream(), fileName, metadata);
} catch (IOException e) {
e.printStackTrace();
return ResponseResult.FAIL();
}
String fileId = gridFSFile.getId().toString();
String resultUrl = FILE_SERVER_BASEURL+"/attachment/download/" + fileId;
Map<String, String> data = new HashMap<>();
data.put("src", resultUrl);
data.put("fileId", fileId);
return ResponseResult.OK(data);
}
@Override
public ResponseEntity<InputStreamResource> attachmentDownload(String fileId) {
Query query = new Query(Criteria.where("_id").is(fileId));
GridFSDBFile gridFsDbFile = gridFsTemplate.findOne(query);
String fileName = gridFsDbFile.getMetaData().get("originalFilename").toString();
try {
fileName = new String(fileName.getBytes("UTF-8"),"iso-8859-1");//檔名轉碼
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
HttpHeaders header = new HttpHeaders();
header.setContentType(MediaType.valueOf(gridFsDbFile.getMetaData().get("contentType").toString()));
header.setContentDispositionFormData("attachment", fileName);
InputStreamResource resource = new InputStreamResource(gridFsDbFile.getInputStream());
return new ResponseEntity<>(resource,header,HttpStatus.CREATED);
}
@Override
public ResponseResult attachmentList(String applyCode) {
Query query = new Query(new Criteria().is("{'metadata':{'applyCode':'" + applyCode + "'}})"));//通過metadata中的applyCode獲取當前申請單中所有的檔案列表。
List<GridFSDBFile> fsFileList = gridFsTemplate.find(query);
List<String> fileNameList = new ArrayList<String>();
for(GridFSDBFile file : fsFileList) {
fileNameList.add(file.getMetaData().get("originalFilename").toString());
}
return ResponseResult.OK(fileNameList);
}
@Override
public ResponseResult attachmentDelete(String fileId) {
Query query = new Query(Criteria.where("_id").is(fileId));
gridFsTemplate.delete(query);
return ResponseResult.SUCCESS();
}
}
注意：此實現類中使用了SpringMVC中ResponseEntity的方式進行檔案的下載。
6）Controller層。
@RestController
public class AttachController {
@Autowired
IFileService fileService;
@CrossOrigin("http://localhost:8081")
@RequestMapping(value="/attachment/upload",method=RequestMethod.POST)
@ResponseBody
public ResponseResult attachmentUpload(@RequestParam(value = "file") MultipartFile file,String applyCode) {
return fileService.storeUploadFile(file, applyCode);
}
@CrossOrigin("http://localhost:8081")
@RequestMapping(value="/attachment/download/{fileId}",method=RequestMethod.GET)
public ResponseEntity<InputStreamResource> attachmentDownload(@PathVariable String fileId){
return fileService.attachmentDownload(fileId);
}
@CrossOrigin("http://localhost:8081")
@RequestMapping(value="/attachment/list",method=RequestMethod.POST)
@ResponseBody
public ResponseResult attachmentList(String applyCode) {
return fileService.attachmentList(applyCode);
}
@CrossOrigin("http://localhost:8081")
@RequestMapping("/attachment/delete")
@ResponseBody
public ResponseResult attachmentDelete(String fileId) {
return fileService.attachmentDelete(fileId);
}
}注意：
1）LayUI的多檔案上傳其實為多檔案逐個檔案上傳，也就是將檔案陣列中的檔案迴圈呼叫檔案上傳方法。
2）此Service層中的檔案上傳的方法為單檔案的方式，若為原始或其他前端實現可