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

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

一:图片的显示

在列表页加入

 {
                    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

相关文章
|
小程序 NoSQL JavaScript
【易售小程序项目】”我的“界面实现+“信息修改“界面实现+登出账号实现+图片上传组件【基于若依管理系统开发】
【易售小程序项目】”我的“界面实现+“信息修改“界面实现+登出账号实现+图片上传组件【基于若依管理系统开发】
107 0
|
4月前
|
存储 缓存 NoSQL
网页设计,若依项目修改(It must be done)04在线用户展示---仅仅从Redis取一下数据做展示,查看若依存储的资料,用RDM
网页设计,若依项目修改(It must be done)04在线用户展示---仅仅从Redis取一下数据做展示,查看若依存储的资料,用RDM
|
4月前
|
前端开发 JavaScript 数据库
分页,快捷链接表单,分页表单,常用软件开发之分页,快捷链接分页表单添加显示,可以做的分页统计,一个简单的添加页面,数据条理清晰呈现如何设计,如何修改成自己想要的,要会编写接口文档,一边写接口
分页,快捷链接表单,分页表单,常用软件开发之分页,快捷链接分页表单添加显示,可以做的分页统计,一个简单的添加页面,数据条理清晰呈现如何设计,如何修改成自己想要的,要会编写接口文档,一边写接口
|
小程序 前端开发
【易售小程序项目】项目介绍、小程序页面展示与系列文章集合
【易售小程序项目】项目介绍、小程序页面展示与系列文章集合
121 2
|
小程序 前端开发
【易售小程序项目】修改“我的”界面前端实现;查看、重新编辑、下架自己发布的商品【后端基于若依管理系统开发】
【易售小程序项目】修改“我的”界面前端实现;查看、重新编辑、下架自己发布的商品【后端基于若依管理系统开发】
91 0
|
开发框架 前端开发 JavaScript
java程序设计与j2ee中间件技术/软件开发技术(III)-大作业-采用MVC模式实现商品信息的查询显示(可以模糊查询)、增加和删除功能,商品表自拟,实现简单菜单操作和分页显示(一)
java程序设计与j2ee中间件技术/软件开发技术(III)-大作业-采用MVC模式实现商品信息的查询显示(可以模糊查询)、增加和删除功能,商品表自拟,实现简单菜单操作和分页显示
354 4
java程序设计与j2ee中间件技术/软件开发技术(III)-大作业-采用MVC模式实现商品信息的查询显示(可以模糊查询)、增加和删除功能,商品表自拟,实现简单菜单操作和分页显示(一)
|
开发框架 前端开发 Java
java程序设计与j2ee中间件技术/软件开发技术(III)-大作业-采用MVC模式实现商品信息的查询显示(可以模糊查询)、增加和删除功能,商品表自拟,实现简单菜单操作和分页显示(二)
java程序设计与j2ee中间件技术/软件开发技术(III)-大作业-采用MVC模式实现商品信息的查询显示(可以模糊查询)、增加和删除功能,商品表自拟,实现简单菜单操作和分页显示
193 4
|
开发框架 前端开发 Java
java程序设计与j2ee中间件技术/软件开发技术(III)-大作业-采用MVC模式实现商品信息的查询显示(可以模糊查询)、增加和删除功能,商品表自拟,实现简单菜单操作和分页显示(三)
java程序设计与j2ee中间件技术/软件开发技术(III)-大作业-采用MVC模式实现商品信息的查询显示(可以模糊查询)、增加和删除功能,商品表自拟,实现简单菜单操作和分页显示
190 4
|
前端开发
A2021-A2022项目展示页面的内容。
A2021-A2022项目展示页面的内容。
98 0
A2021-A2022项目展示页面的内容。
|
资源调度 前端开发
让后台查询+表格这种页面更加快速和简便
让后台查询+表格这种页面更加快速和简便
154 0
下一篇
无影云桌面