基于若依框架（RuoYi-master）实现的的文件上传功能

官网文档

注：在开发时，发现官方文档【上传下载】功能编写的不太准确，因而在此写篇文章以防日后以及看到的小伙伴们踩坑

具体步骤如下：

1、首先创建一张上传文件的表，例如：

drop table if exists sys_file_info;
create table sys_file_info (
  file_id           int(11)          not null auto_increment       comment '文件id',
  file_name         varchar(50)      default ''                    comment '文件名称',
  file_path         varchar(255)     default ''                    comment '文件路径',
  primary key (file_id)
) engine=innodb auto_increment=1 default charset=utf8 comment = '文件信息表';

2、代码生成sys_file_info表相关代码并复制到对应目录。

代码生成以及对应目录的存放可参考之前博客：
若依框架----代码生成（详解）

3、参考如下修改生成的对应代码。

html:
注：在官方文档的基础上，添加了id=fileName,否则【文件名称】字段名会赋不上值

<input id="fileName" name="fileName" class="form-control" type="text">

<input id="filePath" name="filePath" class="form-control" type="file">

js:
注：与官方文档一致

function submitHandler() {
	if ($.validate.form()) {
		uploadFile();
	}
}

function uploadFile() {
	var formData = new FormData();
	if ($('#filePath')[0].files[0] == null) {
		$.modal.alertWarning("请先选择文件路径");
		return false;
	}
	formData.append('fileName', $("#fileName").val());
	formData.append('file', $('#filePath')[0].files[0]);
	$.ajax({
		url: prefix + "/add",
		type: 'post',
		cache: false,
		data: formData,
		processData: false,
		contentType: false,
		dataType: "json",
		success: function(result) {
			$.operate.successCallback(result);
		}
	});
}

SysFileInfoController:
注：添加了@RequestParam(“fileName”) String fileName用来传递前端视图传递开的fileName值并通过setFileName方法给实体赋值

@PostMapping("/addsave")
    @ResponseBody
    public AjaxResult addSave(@RequestParam("file") MultipartFile file,@RequestParam("fileName") String fileName, SysFileInfo fileInfo) throws IOException
    {
        // 上传文件路径
        String filePath = RuoYiConfig.getUploadPath();
        // 上传并返回新文件名称
        String fileNewName = FileUploadUtils.upload(filePath, file);
        fileInfo.setFileName(fileName);
        fileInfo.setFilePath(fileNewName);
        return toAjax(sysFileInfoService.insertSysFileInfo(fileInfo));
    }
   

4、最终实现效果：

5、上传成功后需要预览可以对该属性格式化处理

js
注：添加到info.html对应的代码中

{
	field : 'filePath', 
	title: '文件预览',
	formatter: function(value, row, index) {
		return $.table.imageView(value);
	}
},

6、最终效果