layUI框架中文件上传前后端交互及遇到的相关问题

下面我将讲述一下我在使用layui框架中文件上传所遇到的问题：

前端jsp页面：

<div class="layui-form-item"> 
　　<label class="layui-form-label">照片</label> 
　　<div class="layui-input-block"> 
　　　　<!-- 上传按钮 -->
　　　　<button type="button" class="layui-btn" id="uploadpic"><i class="layui-icon">&#xe67c;</i>选择图片</button> 
　　　　<br><br>                    
　　　　<button type="button" class="layui-btn layui-btn-warm" id="uploadpicbtn">开始上传</button>
　　　　<!-- 隐藏的input,一个隐藏的input（用于保存文件url） -->
　　　　<input type="hidden" id="img_url" name="img" value=""/> 
　　　　<!-- 预览区域 -->
　　　　<div class="layui-upload-list"> 
　　　　　　<img class="layui-upload-img" width="100px" height="80px" id="preshow"/> 
　　　　　　<p id="demotext"></p> 
　　　　</div>                
　　</div> 
</div>
<div class="layui-form-item"> 
　　<label class="layui-form-label">视频</label> 
　　　　<div class="layui-input-block"> 
　　　　<!-- 上传按钮 -->
       <!-- <input type="file" name="file2" lay-type="video" class="layui-upload-file">  -->
       <button type="button" class="layui-btn" id="uploadvideo"><i class="layui-icon"></i>上传视频</button>
       <button type="button" class="layui-btn layui-btn-warm" id="uploadvideobtn">开始上传</button>                     
       <!-- 隐藏的input,一个隐藏的input（用于保存文件url） -->
       <input type="hidden" id="video_url" name="video" value=""/> 
　　</div> 
</div>

<script src="${basepath}/x-admin/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="${basepath}/public/js/jquery-3.3.1.min.js"></script>
/* 前端文件上传到java后端控制器 */　
　<script>
　　layui.use('upload', function(){ 
        var upload = layui.upload , $ = layui.jquery;
        //上传图片
        var uploadinst = upload.render({ 
            elem: '#uploadpic' //绑定元素 
            ,url: '${basepath}/ar/uploadfile' //上传接口 [[@{/upload/img}]]
            ,auto: false
            ,bindaction: '#uploadpicbtn'
            ,before: function(obj){ 
                //预读本地文件示例，不支持ie8 
                obj.preview(function(index, file, result){ 
                    $('#preshow').attr('src', result); //图片链接（base64） 
                    }); 
            } 
        ,done: function(res){ 
            //如果上传失败 
            if(res.code > 0){ 
                alert("上传失败"+res.data.src); 
                return layer.msg('上传失败'); 
                } 
            //上传成功 
                alert("上传成功"+res.data.src); 
                document.getelementbyid("img_url").value = res.data.src; 
                return layer.msg('上传成功'); 
                } 
         ,error: function(){ 
             /*date_default_timezone_set("asia/shanghai");
            //演示失败状态，并实现重传
              var dd=res.responsetext.replace(/<\/?.+?>/g,"");
            var text=dd.replace(/ /g,"");//去掉所有空格
            o.msg("请求上传接口出现异常"+text),
           console.log(text);
            m(e) */
            
            var demotext = $('#demotext');
            demotext.html('<span style="color: #ff5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>'); 
            demotext.find('.demo-reload').on('click', function(){ 
                uploadinst.upload(); 
            });  
           } 
      });  
        
        //上传视频
        var uploadinst =upload.render({
            elem: '#uploadvideo'
                ,url: '${basepath }/ar/uploadfile'
                ,accept: 'video' //视频
                ,done: function(res){
                  console.log(res)
                //如果上传失败 
                if(res.code > 0){ 
                    alert("上传失败"+res.data.src); 
                    return layer.msg('上传失败'); 
                    } 
                    //上传成功 
                    alert("上传成功"+res.data.src); 
                    /* document.getelementbyid("img_url").value = res.data.src;  */
                    return layer.msg('上传成功'); 
                }
　　　　　　});
} ); 

java后台控制端：

@controller
@requestmapping(value="/ar")
@multipartconfig
public class analysereparicontroller {
@autowired
private analyserepariservice arservice;
  //图片上传控制器
        @requestmapping(value = "/uploadfile" , method = requestmethod.post) 
        @responsebody
        public jsonobject uploadpicture(@requestparam("file")multipartfile file,httpservletrequest servletrequest) 
                        throws ioexception { 
                //如果文件内容不为空，则写入上传路径 
                //string str = "";
                jsonobject res = new jsonobject();
                jsonobject resurl = new jsonobject();
                //上传文件路径 
                string path = servletrequest.getservletcontext().getrealpath("/uploadfile");
                
                system.out.println("文件名称"+file.getoriginalfilename()); 
                //上传文件名         
                string name = file.getoriginalfilename();//上传文件的真实名称
                string suffixname = name.substring(name.lastindexof("."));//获取后缀名
                string hash = integer.tohexstring(new random().nextint());//自定义随机数（字母+数字）作为文件名
                string filename = hash + suffixname;        
                file filepath = new file(path, filename); 
                system.out.println("随机数文件名称"+filepath.getname()); 
                //判断路径是否存在，没有就创建一个 
                if (!filepath.getparentfile().exists()) { 
                    filepath.getparentfile().mkdirs(); 
                    } 
                //将上传文件保存到一个目标文档中 
                file tempfile = new file(path + file.separator + filename);
                file.transferto(tempfile);
                
                resurl.put("src", tempfile.getpath());
                res.put("code", 0);
                res.put("msg", "");
                res.put("data", resurl);
                //str = "{\"code\": 0,\"msg\": \"上传成功\",\"data\": {\"src\":\""+path+filename + "\"}}";
                system.out.println("res里面的值：");
                system.out.println(res.tostring());    
                return res;
            } 
}

报“请求上传接口异常”问题，一般的解决方法：

 1、后台返回到前台的json数据一直报数据接口异常

第一，检查自己返回的json数据格式是否正常，该接口返回的相应信息（response）必须是一个标准的 json 格式，如：返回的数据格式是否是

{
  "code": 0
  ,"msg": ""
  ,"data": {
    "src": "http://cdn.layui.com/123.jpg"
  }
}       

返回的数据格式是这样的，但是还是报数据接口异常的话
第二，msg的值一定要写"",不然会一直报错，自己设定的code值一定要写0，其他的值都是错误的。
2、json数据包是否配置好，我就是这样才导致一直报错

在 springcontroller.java中需要如下代码：并在构建路径中引入 这两个jar包，才能支持json格式的生成。

jackson-core-asl-1.9.11.jar

jackson-mapper-asl-1.9.11.jar
先下载这两个jar包，并加到项目的webcontent\web-inf\lib目录下，然后在编辑器目录中右击选择web app libraries中的configure build path...引入项目中放入的两个jar包。

在springmvc.xml中需要配置如下信息：

    <!-- 注解映射器 -->
    <!-- 一定要配置这个，否则layui框架中文件上传会报请求上传接口异常，jackson包，让spring mvc支持json视图的解析以及返回json数据进行呈现 -->
    <!--引入json支持,josn转换器配置  -->
    <bean
        class="org.springframework.web.servlet.mvc.method.annotation.requestmappinghandleradapter">
        <!-- json转换器 -->
        <property name="messageconverters">
            <list>
                <bean
                    class="org.springframework.http.converter.json.mappingjacksonhttpmessageconverter">
                </bean>
            </list>
        </property>
    </bean>

然后再浏览器中访问就可以得到json格式的数据了。

其实，经过测试发现，有的 spring版本不在springmvc.xml中进行josn转换器配置也可以转换成json格式，springmvc有自动转换功能，可惜我的没有。

controller代码: 我用的是@responsebody注解实现的

//文件上传控制器
@requestmapping(value = "/uploadfile" , method = requestmethod.post) 
@responsebody
public jsonobject uploadpicture(@requestparam("file")multipartfile file,httpservletrequest servletrequest) 
                throws ioexception { 
        //如果文件内容不为空，则写入上传路径 
        //string str = "";
        jsonobject res = new jsonobject();
        jsonobject resurl = new jsonobject();
        //上传文件路径 
        string path = servletrequest.getservletcontext().getrealpath("/uploadfile");
        
        system.out.println("文件名称"+file.getoriginalfilename()); 
        //上传文件名         
        string name = file.getoriginalfilename();//上传文件的真实名称
        string suffixname = name.substring(name.lastindexof("."));//获取后缀名
        string hash = integer.tohexstring(new random().nextint());//自定义随机数（字母+数字）作为文件名
        string filename = hash + suffixname;        
        file filepath = new file(path, filename); 
        system.out.println("随机数文件名称"+filepath.getname()); 
        //判断路径是否存在，没有就创建一个 
        if (!filepath.getparentfile().exists()) { 
            filepath.getparentfile().mkdirs(); 
            } 
        //将上传文件保存到一个目标文档中 
        file tempfile = new file(path + file.separator + filename);
        file.transferto(tempfile);
        
        resurl.put("src", tempfile.getpath());
        res.put("code", 0);
        res.put("msg", "");
        res.put("data", resurl);
        //str = "{\"code\": 0,\"msg\": \"上传成功\",\"data\": {\"src\":\""+path+filename + "\"}}";
        system.out.println("res里面的值：");
        system.out.println(res.tostring());    
        return res;
    } 

 

效果图：