如何在RuoYi框架中实现文件及信息同步上传

步骤

页面修改

	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-version-add" enctype="multipart/form-data">
            <div class="form-group">    
                <label class="col-sm-3 control-label">AppID：</label>
                <div class="col-sm-8">
                    <input name="appId" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">App类型：</label>
                <div class="col-sm-8">
                    <select name="appType" class="form-control m-b">
                        <option value="Android">Android</option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">App名称：</label>
                <div class="col-sm-8">
                    <input name="appName" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">App版本：</label>
                <div class="col-sm-8">
                    <input name="appVersion" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">App版本信息：</label>
                <div class="col-sm-8">
                    <textarea name="versionInfo" class="form-control"></textarea>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">APP：</label>
                <div class="col-sm-8">
                    <input id="appFile" name="file" class="form-control" type="file" required>
                </div>
            </div>
        </form>
    </div>
    <script th:inline="javascript">
        var prefix = ctx + "system/version"
        $("#form-version-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                var data = new FormData();
                data.append("appId",$('input[name="appId"]').val());
                data.append("appType",$('select[name="appType"] option:selected').val());
                data.append("appName",$('input[name="appName"]').val());
                data.append("appVersion",$('input[name="appVersion"]').val());
                data.append("versionInfo",$('textarea[name="versionInfo"]').val());
                data.append('file',document.getElementById('appFile').files[0]); //这里为将文件添加到数据集合里面（只测试过单文件上传，多文件上传需自己进行整理）
                $.operate.saveFormFile(prefix + "/add", data);
            }
        }
    </script>

在ruoyi.js追加文件上传的AJAX方法

			saveFormFile: function(url, data, callback) {
				var config = {
					url: url,
					type: "post",
					dataType: "json",
					cache: false,
					processData: false,//用于对data参数进行序列化处理 这里必须false
					contentType: false, //必须
					data: data,
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍后...");
						$.modal.disable();
					},
					success: function(result) {
						if (typeof callback == "function") {
							callback(result);
						}
						$.operate.successCallback(result);
					}
				};
				$.ajax(config)
			},

后台接口

	@PostMapping("/add")
    @ResponseBody
    public AjaxResult addSave(AppVersion appVersion, MultipartFile file)
    {
        try{
           //这里替换自己的文件上传及信息保存逻辑即可
        }catch (Exception e){
            e.printStackTrace();
            return AjaxResult.error("信息保存错误");
        }

        return AjaxResult.success();
    }