背景:大家在使用若依架构时上传文件,当上传成功是点击删除,vue只是把前端文件列表名称删除了,真正上传到服务器里的文件还在服务器upload文件里面。文件小点到无所谓,但是针对经常上传大文件的系统来说还是比较浪费服务器硬盘资源。
第一步:修改若依的fileUpload组件。
// 删除文件
handleDelete(index) {
//字符串File文件路径
let fileName=this.fileList[index].url;
this.fileList.splice(index, 1);
this.$emit("input", this.listToString(this.fileList));
//删除服务器文件
this.removeFile(fileName);
},
添加一个从服务器删除文件的一个请求方法。
//从服务器删除文件
removeFile(fileName) {
if (fileName) {
// 构造要发送到后台的数据
const data = {
id: 1,
content: fileName
};
request({
url: '/common/remove/',
method: 'put',
data: data
}).then(response => {
this.$modal.msgWarning(response.msg)
}
);
}
},
第二步,在CommonController.java文件里面添加api接口,代码如下
/**
* 删除文件
*/
@Log(title = "文件删除", businessType = BusinessType.DELETE)
@PutMapping("/remove")
public AjaxResult remove(@RequestBody ComData data)
{
//传过来文件多了/profile,所以需要在下面处理是截取
String fileName = data.getContent();
if (StringUtils.isNotEmpty(fileName)) {
//只能删除指定文件后缀的文件
String suffixName = PdfUtils.getSuffixName(fileName);
List<String> list = Arrays.asList(FileUtils.allowedDeleteSuffixes);
if (list.contains(suffixName)) {
// 本地资源路径
String localPath = RuoYiConfig.getProfile();
String realPath = localPath + fileName.substring(8, fileName.length());
FileUtils.deleteFile(realPath);
} else {
return AjaxResult.error("文件删除失败");
}
}
return AjaxResult.success("文件已删除");
}
这里面使用到一个bean类(接受传过的文件路径)和一个变量(允许删除的文件类型)。
package com.ruoyi.web.controller.common;
public class ComData {
private Long id;
private String content;
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
变量我是放到了FileUtils.java这个文件里面的。
//允许删除的文件类型
public static String[] allowedDeleteSuffixes = new String[]{"doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt", "pdf", "jpg", "jpeg", "png", "gif", "zip", "rar"};
第三部:把服务起来,点击要删除的文件。
系统提示删除文件成功、文件夹下的文件就删除了。
---------------------------------------结束---------------------------------------