若依管理系统图片的显示、修改操作

简介: 若依管理系统图片的显示、修改操作

一:图片的显示

在列表页加入

 {
                    field: 'cityImg',
                    title: '城市图片',
                    formatter: function (value, row, index) {
                        console.log("aa"+value);
                        return '<img src="http://localhost:8080/ShadowLine/'+value+'" width="150" height="100">';
                    }
                },

注意我的路径是网络路径,改成本地的绝对路径没有成功。


二:图片的上传


生成代码的时候在图片那一列选择上传控件


20210608142912841.png

 <div class="form-group">
            <label class="col-sm-3 control-label">电影图片:</label>
            <div class="col-sm-8">
                <input type="hidden" name="filmImg" th:field="*{filmImg}">
                <div class="file-loading">
                    <input class="form-control file-upload" id="filmImg" name="file" type="file">
                </div>
            </div>
        </div>
 $(".file-upload").each(function (i) {
        var val = $("input[name='" + this.id + "']").val()
        $(this).fileinput({
            'uploadUrl': ctx + 'common/upload1',
            initialPreviewAsData: true,
            initialPreview: [val],
            maxFileCount: 1,
            autoReplace: true
        }).on('fileuploaded', function (event, data, previewId, index) {
            $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
        }).on('fileremoved', function (event, id, index) {
            $("input[name='" + event.currentTarget.id + "']").val('')
        })
        $(this).fileinput('_initFileActions');
    });

若依这个框架自带了一个文件上传的方法。

在CommonController里面

在CommonController里面
/**
* 通用上传请求
/
@PostMapping("/common/upload")
@ResponseBody
public AjaxResult uploadFile(MultipartFile file) throws Exception
{
try
{
/*
* 这个地方只负责上传 不负责保存 保存是在你具体业务里 所有i 你在这个位置做测试是没用的
*/
// 上传文件路径
String filePath = “D:\Environment\workspace\ShadowLine\WebContent\imgs\city\cityImg\”;
System.out.println(“上传图片的路径是:”+filePath);
// 上传并返回新文件名称
String fileName=FileUploadUtils.upload(filePath, file);
        System.out.println("上传图片的名字是:"+fileName);
        String url = "imgs/city/cityImg/"+fileName;
        System.out.println("url是"+url);//这个地方是存在数据库里图片的那个字段
        AjaxResult ajax = AjaxResult.success();
        ajax.put("fileName", fileName);
        ajax.put("url", url);
        return ajax;
    }
    catch (Exception e)
    {
        return AjaxResult.error(e.getMessage());
    }
}

效果图:

20210608143555252.png

相关文章
|
前端开发
若依框架---如何使用多数据源?前端table中如何显示图片?
若依框架---如何使用多数据源?前端table中如何显示图片?
1207 2
|
存储
若依框架 --- pdf文件上传预览功能实现
若依框架 --- pdf文件上传预览功能实现
1457 0
|
JavaScript Java
springboot和vue项目如何上传图片,结合若依框架实现
springboot和vue项目如何上传图片,结合若依框架实现
1168 0
|
JavaScript 前端开发
若依框架文档开发手册----开发中常用功能模块(中)
若依框架文档开发手册----开发中常用功能模块
5077 0
|
前端开发 数据库 对象存储
基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持本地图片上传与回显的功能实现(一)
基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持本地图片上传与回显的功能实现(一)
1726 0
|
SQL JSON 前端开发
若依RuoYi脚手架二次开发教程(二次开发必学技能)
本次我们将通过一个菜品管理模块开发的案例,来演示拿到若依框架后,如何在若依管理系统上进行二次开发,升级改造为自己的管理系统。适合以若依作为项目脚手架的公司开发人员、毕业设计的学生及开源项目学习者。
10891 1
若依RuoYi脚手架二次开发教程(二次开发必学技能)
|
SQL XML JavaScript
【若依Java】15分钟玩转若依二次开发,新手小白半小时实现前后端分离项目,springboot+vue3+Element Plus+vite实现Java项目和管理后台网站功能
摘要: 本文档详细介绍了如何使用若依框架快速搭建一个基于SpringBoot和Vue3的前后端分离的Java管理后台。教程涵盖了技术点、准备工作、启动项目、自动生成代码、数据库配置、菜单管理、代码下载和导入、自定义主题样式、代码生成、启动Vue3项目、修改代码、以及对代码进行自定义和扩展,例如单表和主子表的代码生成、树形表的实现、商品列表和分类列表的改造等。整个过程详细地指导了如何从下载项目到配置数据库,再到生成Java和Vue3代码,最后实现前后端的运行和功能定制。此外,还提供了关于软件安装、环境变量配置和代码自动生成的注意事项。
32624 73
|
监控 NoSQL Java
若依RuoYi项目环境搭建教程(RuoYi-Vue + RuoYi-Vue3版本)
若依(RuoYi)是一款基于Spring Boot和Vue.js的开源Java快速开发脚手架,支持OAuth2、JWT鉴权,集成多种安全框架和持久化框架。它提供了系统管理、监控管理、任务调度、代码生成等常用功能模块,适合中小型公司快速搭建Web应用。本文主要介绍若依框架的特点、版本发展、优缺点及项目部署步骤,帮助开发者快速上手并部署若依项目。
23562 3
若依RuoYi项目环境搭建教程(RuoYi-Vue + RuoYi-Vue3版本)
|
监控 Java 调度
若依修改定时任务,定时任务在系统监控的定时任务当中,宕机情况都不会去管,涉及到定时任务
若依修改定时任务,定时任务在系统监控的定时任务当中,宕机情况都不会去管,涉及到定时任务
|
前端开发 数据库
两步教你ruoyi若依跳过前端拦截器变成自己的前端
如何通过修改前端配置和后端设置来跳过若依(RuoYi)前端的token验证,以便复用其前端框架并将其变成自己的前端。
 两步教你ruoyi若依跳过前端拦截器变成自己的前端

热门文章

最新文章