用LayUI和ajax实现文件上传，“请求上传接口出现异常”问题 |
您所在的位置：网站首页 › iphone文件上传错误 › 用LayUI和ajax实现文件上传，“请求上传接口出现异常”问题 |
用LayUI和ajax实现文件上传，“请求上传接口出现异常”问题
|
在ssm框架下，用LayUI（ajax）实现文件上传，以及解决“请求上传接口出现异常”问题
一.框架、样式、异常情况如下：
二、1.在jsp中的body中写按钮和上传后图片放入的框 上传按钮 上传图片2.实现ajax代码如下（发现我的要写在后面，不知道你们写在或者里面有没有问题）： layui.use('upload', function() { let $ = layui.jquery let upload = layui.upload //常规使用 - 普通图片上传 let uploadInst = upload.render({ elem: '#test1' , url: '/upload/image' //改成您自己的上传接口 ,dataType:"json" , before: function (obj) { //预读本地文件示例，不支持ie8 obj.preview(function (index, file, result) { $('#image').attr('src', result); //图片链接（base64） alert(src); }); } , done: function (res) { //如果上传失败 if (res.code>0) { return layer.msg('上传失败!!!'); } alert("成功"); } , error: function () { alert("上传失败"); } }); });3.导入LayUI，（在官网上https://www.layui.com/上下载） 4.实体类DataJson.java public class DataJson { private Integer code; private String msg; private Map data; public Integer getCode() { return code; } public void setCode(Integer code) { this.code = code; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public Map getData() { return data; } public void setData(Map data) { this.data = data; } @Override public String toString() { return "DataJson{" + "code=" + code + ", msg='" + msg + '\'' + ", data=" + data + '}'; } }5.工具类，UploadUtils .java，这里上传路径为webapp下的upload，一定要在target的对应地方建立一个upload文件夹，不然找不到文件路径。 public class UploadUtils { //定义一个上传文件的路径，webapp下的upload private static final String path = UploadUtils.class.getClassLoader().getResource("").getPath(); private static final String BASE_PATH = path.substring(0, path.indexOf("/WEB-INF/"))+"\\upload"; //定义文件服务器的访问地址 private static final String SERVER_PATH="http://localhost:8080/upload/"; public static String upload(MultipartFile file){ //获得上传文件的名称 String filename = file.getOriginalFilename(); String newFileName =filename; //创建文件实例对象 File uploadFile = new File(BASE_PATH,newFileName); //判断当前文件是否存在 if (!uploadFile.exists()){ //如果不存在就创建一个文件夹 uploadFile.mkdirs(); } //执行文件上传的命令 try { file.transferTo(uploadFile); } catch (IOException e) { return null; } System.out.println("11111111111"); System.out.println(BASE_PATH); return SERVER_PATH+newFileName; } }
7.建立ToUpLoadController.java控制类，uploadfile.jsp就是我们创建的页面（也可以用.html的），运行项目，访问http://localhost:8080/uploadFile/upload就可。 @Controller @RequestMapping("/uploadFile") public class ToUpLoadController { @RequestMapping("/upload") public String userlogin(){ return "uploadfile"; } }8.当我们访问时，会出现“请求上传接口出现异常”提示，接下来，我们来看下处理方法。 三、处理“接口请求异常”问题。 1.上传图片时，，页面上显示了我们上传的图片，进入ajax的error，页面上显示“请求上传接口出现异常”弹窗，项目中报错如下，这是没有提供依赖导致的，在pom中加入依赖，在springmvc.xml中加入multi-par配置 2.现在后台图片上传正常，项目中没有报错，但是页面上还是显示“请求上传接口出现异常”弹窗，ajax进入了error。此时在pom中加入依赖（如果报错还是没变，则可能是导入的版本不匹配或者版本太低） com.fasterxml.jackson.core jackson-databind 2.9.8
|
6.controller类，UploadController.java
好了，现在项目没有错误了，可以正常运行了。【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |