用LayUI和ajax实现文件上传，“请求上传接口出现异常”问题

最新推荐文章于 2024-04-26 08:00:00 发布

红烧鱼块

最新推荐文章于 2024-04-26 08:00:00 发布

阅读量8.3k

点赞数 1

分类专栏： JavaWeb 文章标签： javaweb layui ssm

本文链接：https://blog.csdn.net/qq_45868866/article/details/119009520

版权

JavaWeb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在ssm框架下，用LayUI（ajax）实现文件上传，以及解决“请求上传接口出现异常”问题

一.框架、样式、异常情况如下：
在这里插入图片描述

在这里插入图片描述

二、1.在jsp中的body中写按钮和上传后图片放入的框

<div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">上传按钮</label>
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn" id="test1">
                                        <i class="layui-icon">&#xe67c;</i>上传图片
                                    </button>
                                </div>
                            </div>

2.实现ajax代码如下（发现我的要写在</html>后面，不知道你们写在<head></head>或者<body></body>里面有没有问题）：

<script>
    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("上传失败");
            }
        });
    });
</script>

3.导入LayUI，（在官网上https://www.layui.com/上下载）

 <link rel="stylesheet" href="../layui/2.5.7/css/layui.css">
    <script src="../layui/2.5.7/layui.js"></script>

4.实体类DataJson.java

public class DataJson {
    private Integer code;
    private String msg;
    private Map<String,String> 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<String, String> getData() {
        return data;
    }

    public void setData(Map<String, String> 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;
    }
}

在这里插入图片描述
6.controller类，UploadController.java

@Controller
@RequestMapping("/upload")
public class UploadController {
    @RequestMapping("/image")
    @ResponseBody
        public DataJson image(MultipartFile file){
        //调用工具类完成文件上传
        String imagePath = UploadUtils.upload(file);
        System.out.println(imagePath);
        DataJson dataJson = new DataJson();
        if (imagePath != null){
            //创建一个HashMap用来存放图片路径
            HashMap hashMap = new HashMap();
            hashMap.put("src",imagePath);
            dataJson.setCode(0);
            dataJson.setMsg("上传成功");
            dataJson.setData(hashMap);
            System.out.println("成功！！！！！！！");
        }else{
            dataJson.setCode(1);
            dataJson.setMsg("上传失败");
            System.out.println("失败！！！！！！！！");
        }
        return dataJson;
    }
}

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配置
在这里插入图片描述

<!--文件上传-->
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.3.3</version>
    </dependency>
    <dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.4</version>
    </dependency>

 <!--    处理文件上传，id是固定值，不可改变。提供multi-part配置，处理parts-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!--        上传大小限制50M-->
        <property name="maxUploadSize">
            <value>52428800</value>
        </property>
        <property name="defaultEncoding">
            <value>utf-8</value>
        </property>
    </bean>

2.现在后台图片上传正常，项目中没有报错，但是页面上还是显示“请求上传接口出现异常”弹窗，ajax进入了error。此时在pom中加入依赖（如果报错还是没变，则可能是导入的版本不匹配或者版本太低）

   <!-- JACKSON包，让Spring MVC支持JSON视图的解析以及返回JSON数据进行呈现 -->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.9.8</version>
    </dependency>

在这里插入图片描述

好了，现在项目没有错误了，可以正常运行了。

红烧鱼块

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
用LayUI和ajax实现文件上传，“请求上传接口出现异常”问题

在ssm框架下，用LayUI（ajax）实现文件上传，以及解决“请求上传接口出现异常”问题一.框架、样式、异常情况如下：二、1.在jsp中的body中写按钮和上传后图片放入的框<div class="layui-form-item layui-form-text"> <label class="layui-form-label">上传按钮</label>
复制链接

扫一扫