layui图片上传和回显java

最新推荐文章于 2025-02-06 00:13:29 发布

原创最新推荐文章于 2025-02-06 00:13:29 发布 · 1.8k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript #前端

本文介绍了如何在前端使用layui框架实现图片上传功能，包括HTML结构、JavaScript代码以及后端Java处理上传文件的详细步骤。通过Ajax调用上传接口，处理文件名、大小和保存路径，最后返回图片路径给前端。

前端：

<div class="layui-form-item">
    <label class="layui-form-label">图片上传</label>
    <div class="layui-input-block">
        <input  name="image" id="test2" style="display: none">
        <img class="layui-upload-img" id="image" style="width: 9em;height: 9em">
        <button type="button" class="layui-btn" id="uploadBtn">上传</button>
    </div>
</div>

js：注意需要引入upload

// 初始化上传组件
upload.render({
    elem: '#uploadBtn', // 绑定元素
    url: '/book/upload', // 上传接口
    exts: 'jpg|png|gif|bmp|jpeg', // 只允许上传压缩图片格式
    before: function (obj) {

    },
    done: function (res) {
        // 上传成功回调
        console.log(res.data); // 打印服务器返回的数据
        // 可以在这里处理服务器返回的图片URL，比如更新到表单的隐藏字段中等
        $('#image').attr('src',"http://localhost/" +res.data);
        $('#test2').val("http://localhost/" +res.data);
    },
    error: function () {
        // 请求异常回调
        console.log('文件上传失败');
    }
});

后端：

@PostMapping("/upload")
@ApiOperation(value = "上传图书图片", notes = "上传图书图片")
@ApiOperationSupport(author = "java")
public DataInfo upload(HttpServletRequest request, @RequestParam("file") MultipartFile multipartFile) throws IOException {
    HttpSession session = request.getSession();
    //获取上传的图片的文件名
    String fileName = multipartFile.getOriginalFilename();
    log.info("上传的头像名称为：" + fileName);
    //获取上传文件的大小
    long size = multipartFile.getSize();
    log.info("上传的头像大小为：" + size);
    //获取上传文件的后缀名
    assert fileName != null;
    String suffixName = fileName.substring(fileName.lastIndexOf("."));
    log.info("上传的头像后缀为：" + suffixName);
    //将UUID作为文件名，并去掉四个"-"
    String uuid = UUID.randomUUID().toString().replaceAll("-", "");
    //将uuid和后缀名拼接后的结果作为最终的文件名
    fileName = uuid + suffixName;
    log.info("上传的图片的新的名称为：" + fileName);
    //获取项目images文件夹的地址
    //String url = request.getSession().getServletContext().getRealPath("images");
    String url = "D:/A2023GetMoney/Library-master/src/main/resources/static/file/img/";
    log.info("获取项目classes/static/images的地址为：" + url);
    //图片存储目录及图片名称
    String imagePath = "file/img" + File.separator + fileName;
    log.info("图片存储目录及图片名称为：" + imagePath);
    File file = new File(url);
    if (!file.exists()) {
        //若不存在，则创建目录
        file.mkdir();
    }
    //图片保存路径
    String savePath = url + File.separator + fileName;
    log.info("图片保存路径为：" + savePath);
    //保存图片
    multipartFile.transferTo(new File(savePath));
    return DataInfo.ok(imagePath);
}