使用若依上传文件

<div class="text-center">
                    <p><img class=" img-lg" id="avtarImg"></p>
                    <a href="javascript:void(0)" class="upload-img"> <label for="header">选择头像</label> </a>
                    <input type="file" class="" style="display:none" name="header" id="header" accept="image/*"/>
                </div>

js代码

function submitHandler() {
            if ($.validate.form()) {
                var formData = new FormData();
                //其他字段内容
                formData.append('name',$("#name").val());
                formData.append('mode',$("#mode").val());
                formData.append('title',$("#title").val());
                formData.append('remark',$("#remark").val());
              	//图片文件内容
                formData.append('file', $('#header')[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);
                    }
                });
            }

controller代码

	/**
     * 新增信息
     */
    @RequiresPermissions("member:leader:add")
    @Log(title = "信息", businessType = BusinessType.INSERT)
    @PostMapping("/add")
    @ResponseBody
    public AjaxResult addSave(MultipartFile file,Leader leader) throws IOException {
        if (file != null) {
            // 上传文件路径
            String filePath = RuoYiConfig.getUploadPath();
            // 上传并返回新文件名称
            String fileName = FileUploadUtils.upload(filePath, file);
            leader.setHeader(fileName);
        }
        return toAjax(leaderService.insertLeader(leader));
    }
  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
若依框架的文件上传功能可以通过以下步骤使用: 1. 在需要上传文件的页面中,引入`webuploader.js`和`uploader.css`文件。 2. 在页面中添加一个上传文件的按钮,例如: ```html <div id="uploader"> <div class="queueList"> <div id="dndArea" class="placeholder"> <div id="filePicker"></div> <p>或将文件拖到这里,单次最多可选300个文件</p> </div> </div> <div class="statusBar" style="display:none;"> <div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div><div class="info"></div> <div class="btns"> <div id="filePicker2"></div><div class="uploadBtn">开始上传</div> </div> </div> </div> ``` 3. 使用JavaScript代码初始化上传组件,例如: ```javascript // 初始化WebUploader var uploader = WebUploader.create({ auto: true, swf: '/plugins/webuploader/Uploader.swf', server: '/system/sysFile/upload', pick: { id: '#filePicker', label: '点击选择文件' }, formData: { 'fileType': options.fileType, 'fileGroup': options.fileGroup }, chunked: true, chunkSize: 20 * 1024 * 1024, chunkRetry: 2, threads: 1, fileNumLimit: 300, fileSizeLimit: 2 * 1024 * 1024 * 1024, fileSingleSizeLimit: 50 * 1024 * 1024 }); // 文件上传成功后的回调函数 uploader.on('uploadSuccess', function (file, response) { if (response.code == 0) { // 上传成功,处理业务逻辑 } else { // 上传失败,提示错误信息 alert(response.msg); } }); ``` 在上述代码中,`auto`选项表示选择文件后是否自动上传,`server`选项表示上传文件的服务器地址,`pick`选项表示上传文件的按钮的选择器,`fileNumLimit`选项表示最多能同时选择的文件数量,`fileSizeLimit`选项表示所有文件的总大小上限,`fileSingleSizeLimit`选项表示单个文件的大小上限。其中,`formData`选项可以传递额外的参数给服务器端,例如上述代码中的`fileType`和`fileGroup`。 4. 在服务器端,可以通过接收上传文件的请求并处理上传文件的逻辑,例如: ```java public AjaxResult uploadFile(MultipartFile file, String fileType, String fileGroup) { try { // 上传文件 String filePath = FileUploadUtils.upload(fileType, fileGroup, file); return AjaxResult.success(filePath); } catch (IOException e) { logger.error("上传文件失败", e); return AjaxResult.error("上传文件失败"); } } ``` 在上述代码中,`FileUploadUtils.upload`方法是若依框架内置的上传文件的方法,它会将上传的文件保存到指定的路径,并返回文件的保存路径。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

尉某人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值