這篇文章主要講解了“用SpringMVC+MongoDB+Layui實現文件的上傳、下載和刪除功能”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“用SpringMVC+MongoDB+Layui實現文件的上傳、下載和刪除功能”吧！
應項目要求，使用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 >上傳成功</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 >上傳失敗</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層中的文件上傳的方法為單文件的方式，若為原始或其他前端實現可稍微改造即可。
感謝各位的閱讀，以上就是“用SpringMVC+MongoDB+Layui實現文件的上傳、下載和刪除功能”的內容了，經過本文的學習后，相信大家對用SpringMVC+MongoDB+Layui實現文件的上傳、下載和刪除功能這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
