H5W3
当前位置:H5W3 > 其他技术问题 > 正文

用的layui的上传控件,为什么传到后台之后是null啊?

html

<div class="layui-upload biangeng_3_1">
                <button type="button" class="layui-btn" id="yingyezhizhao"><i class="layui-icon"></i>营业执照</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="yingyezhizhao_preview">
                   <!-- <p id="demoText"></p>-->
                </div>
            </div>

js

layui.use('upload', function(){
    var upload = layui.upload;

    //执行实例
    var uploadInst = upload.render({
        elem: '#yingyezhizhao' //绑定元素
        ,url: '../app/upload/changeImg' //上传接口

        ,done: function(res){
            //上传完毕回调
            $('#yingyezhizhao_preview').attr('src','../'+ data.data);
            layer.msg('上传成功!');
        }
        ,error: function(){
            layer.msg('上传失败');
        }
    });
});

图片描述

回答:

因为你前端提交的参数名(file)与后台接收的参数名(imageFile)不一致,导致后台接收不到数据

我从layui示例中上传文件

clipboard.png

使用chrome浏览器,打开开发者工具(win F12,苹果 option + command + i),点击上传文件,查看它发送的请求,如下图红圈,发现参数名为file

clipboard.png

所以如果不想改前端,只改后台,可以将后台接收参数名改成file。或者修改前端提交的参数名,从改插件的提供的参数选项上可以修改,如下图红圈部分,前端只需添加一个字段field:imageFile即可

clipboard.png

回答:

把你后台接口的参数名imageFile修改为file ,或者在参数前面加上 @RequestParam(value="file")

回答:

正解牛逼,名字错了,前后台不对应导致的,我也是这个原因现在解决了

回答:

如果你确定前端上传没有问题。

    @PostMapping
    public Object uploadImgFile(@RequestPart("img") MultipartFile img) {
        return aliyunOssManagerI.uploadFileToAliyunOss(img);
    }

看你spring 版本。

@RequestPart 或者 @RequestParam

本文地址:H5W3 » 用的layui的上传控件,为什么传到后台之后是null啊?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址