Layui上传图片+携带参数+springmvc接收

上传图片这边遇到了坑，发出来希望可以帮助到需要的人。本人新手小白，有些原理还没有搞清楚，欢迎大家批评指正！

html

代码：

<div class="layui-upload ">
        <button type="button" class="layui-btn" id="test1" >上传图片</button>
        <div class="layui-upload-list">
            <img style="height: 80px;width: 80px;" class="layui-upload-img" id="demo1" >
            <p id="demoText"></p>
        </div>
    </div>

JavaScript

 layui.use(['upload','element','jquery'], function(){
        var $ = layui.jquery
            ,upload = layui.upload,
            element = layui.element;
        //普通图片上传
        var pid=$(" input[ name='pid1' ] ").val()
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/upload'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                this.data={"pid":pid,"type":"1"}//携带参数
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64） 用来显示返回的文件
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }else {
                    return layer.msg('上传成功');
                }
                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

携带参数就只是在函数里加了 this.data={“pid”:pid,“type”:“1”}，发送的是一个json数组，把要带的参数写成json的形式

springmvc接受

@RequestMapping(value = "/upload", method = {RequestMethod.POST})
    @ResponseBody
    public Object add(@RequestParam(value="file",required=false) MultipartFile image, HttpServletRequest request) throws Exception {
        String pid = request.getParameter("pid");
        String type = request.getParameter("type");
        int t = Integer.parseInt(type);
        Image i= new Image();
        i.setType(type);
        i.setPid(t);
        imgMapper.add(i);
        String folder = "img/";
        if(type.equals("1")){
            folder +="imgshow";
        }
        else{
            folder +="imgDetail";
        }
        File  imageFolder= new File(request.getServletContext().getRealPath(folder));
        File file = new File(imageFolder,pid+".jpg");
        String fileName = file.getName();
        if(!file.getParentFile().exists())
            file.getParentFile().mkdirs();
        try {
            image.transferTo(file);
            BufferedImage img = ImageUtil.change2jpg(file);
            ImageIO.write(img, "jpg", file);
        } catch (IOException e) {
            e.printStackTrace();
        }
        Map<String,Object> map=new HashMap<>();
        map.put("code",0);
        map.put("msg","");
        return map;
    }

1.@RequestMapping(value = “/upload”, method = {RequestMethod.POST})，方法必须是post
GET请求和POST请求的区别：
GET请求：
Ø 请求参数会在浏览器的地址栏中显示，所以不安全；
Ø 请求参数长度限制长度在1K之内；
Ø GET请求没有请求体，无法通过request.setCharacterEncoding()来设置参数的编码；
POST请求：
Ø 请求参数不会显示浏览器的地址栏，相对安全；
Ø 请求参数长度没有限制；
2、@ResponseBody 接受json要用这个注解
3、@RequestParam(value=“file”,required=false) MultipartFile image 接受图片，后面的代码大概就是把接收到的图片复制在指定目录下。
但是不能用@RequestParam(“pid”) int pid 去接受pid参数，好像是因为@RequestParam("")只能接受url里面的参数_
@PathVariable(“pid”)int pid也是只能接受url里面传过来的参数
String pid = request.getParameter(“pid”);接收json里面的参数是可以的
4、最后一段：
Map<String,Object> map=new HashMap<>();
map.put(“code”,0);
map.put(“msg”,"");
return map;
前面的JavaScript上有判断code>0就报上传失败，所以要返回给一个json，让code=0就可以了。如果有别的需要也可以继续加，在jsp页面接收就好了

可以看到上传的包里除了第一个file文件，还有地下的name=pid、name=type
@RequestParam(value=“file”) MultipartFile image
String pid = request.getParameter(“pid”)
就可以在后台接收到

这边返回的也到达了