springboot 将图片url转为pdf springboot 图片预览

转载

mob64ca1418736f 2024-03-23 08:25:33

文章标签 java javascript 前端 ViewUI 上传 文章分类 架构后端开发

springboot自带图片服务器，但是一般我们都不会用，文件这一块因为灵活性比较高，可能每个公司的都不一样，因此最好还是自己来搞定。

一、思路

1、上传
①.使用spring的正常上传，文件存储路径为磁盘任意位置，可配置
②.业务表中存附件id
③.前端使用Layui
2、预览
①.使用nginx代理，只需要根据附件id获取图片路径即可

二、上传

1.建表

CREATE TABLE `sys_accessory` (
  `id` varchar(32) DEFAULT NULL,
  `original_name` varchar(256) DEFAULT NULL COMMENT '原文件名\n',
  `file_size` int(11) DEFAULT NULL COMMENT '文件大小（单位：字节）',
  `path` varchar(256) DEFAULT NULL COMMENT '存储路径',
  `category` varchar(32) DEFAULT NULL COMMENT '分类',
  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
  `create_user` varchar(32) DEFAULT NULL COMMENT '创建人',
  `is_del` char(1) DEFAULT NULL COMMENT '是否删除（1：是，0：否）'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='附件表';

2.文件上传的主要代码
上传的返回值是附件id，因为上传后其他操作需要（比如保存用户头像）需要用到

@RequestMapping("upload")
    public ResultModel<String> upload(@RequestParam("file") MultipartFile file, String userId, @RequestParam("category") String category) {

        String originalName = file.getOriginalFilename();
        long fileSize = file.getSize();
        String ext = originalName.substring(originalName.lastIndexOf(".") + 1, originalName.length());
        String tmpName = genTmpFileName();
        String path = File.separator + category + File.separator + tmpName + "." + ext;
        try {
            File targetFile = new File(uploadBasePath +  path);
            if (!targetFile.getParentFile().exists()){
                targetFile.getParentFile().mkdirs();
            }
            file.transferTo(targetFile);
            SysAccessory accessory = getAcc(userId,originalName,Integer.parseInt(String.valueOf(fileSize)),path,category);
            return sysAccessoryService.upload(accessory);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return ResultModel.defaultError(null);
    }

    private SysAccessory getAcc(String userId, String originalName, Integer fileSize, String path, String category) {
        SysAccessory accessory = new SysAccessory();
        accessory.setCreateTime(new Date());
        accessory.setCreateUser(userId);
        accessory.setIsDel(Constants.NEGATIVE);
        accessory.setOriginalName(originalName);
        accessory.setFileSize(fileSize);
        accessory.setPath(path);
        accessory.setCategory(category);
        return accessory;
    }

    private String genTmpFileName() {
        return DateUtil.date_string(new Date(), "yyyyMMddHHmmssssss");
    }

其实比较复杂的是页面上的操作，每一个做过上传的相信也都有体会，但是这个layui已经帮我们简化了很多，基于上传是一个公用方法，此处我又做了一次抽取，代码如下

var upload = function (eleId, layUpload, done,extendParam, error, accept, exts) {
        layUpload.render({
            elem: eleId //绑定元素
            , url: uploadPath //上传接口--此处通过配置的全局变量获取
            , accept: accept === undefined ? 'file' : accept
            , exts: exts === undefined ? 'jpg|png|gif|bmp|jpeg' : exts
            , data: extendParam
            , done: function (res) {
                //上传完毕回调
                if (typeof (done) === 'function') {
                    console.log(res);
                    if (res.code === '0'){
                        done(res.data);
                    }
                }
            }
            , error: function () {
                //请求异常回调
                if (typeof (error) === 'function') {
                    error()
                }
            }
        });
    };

参数解释：
eleId：绑定上传事件元素id
layUpload：layui的upload模块，也可以在此处使用layui.use再次获取
done：上传成功回调
默认传这三个方法就够了，如果不需要处理失败等情况的话（但是不建议这么干）

extendParam：自定义扩展参数
error：失败回调
accept：接收类型（layui默认：file）
exts：文件扩展名（layui默认：jpg|png|gif|bmp|jpeg）
3.前端页面

<!--这只是上传文件代码，其他表单信息忽略-->
  <button type="button" class="layui-btn" id="test1">
              <i class="layui-icon"></i>上传图片
 </button>
  <input type="hidden" id="photo" name="photo" value="">
<div id="previewPhoto"> 
    <img src="/images/default-mem.png" th:src="${defaultImageViewPath+user.photo}" alt="" style="width: 80px;height: 80px;">
</div>
<script>
    layui.use('form', function () {
        var form = layui.form, upload = layui.upload,$=layui.jquery;
        form.render();
        Common.uploadFile('#test1', upload, function (data) {
            $("#photo").val(data); //回写附件id，用于提交表单时保存到业务表
            $("#previewPhoto img").attr("src",defaultImageViewPath + data);//图片回显，样式可以自己随便写
        },{category:'photo'});
        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            //TODO ajax提交表单
            return false;
        });
    });
</script>

三、效果

springboot 将图片url转为pdf springboot 图片预览_上传

头像上传

四、预览

预览更简单，只需要获取图片路径，配合nginx即可。
nginx配置

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }
        location /file {
            alias   D:\easyboot;
            allow all;
            autoindex on;
        }
}

java代码部分：

@RequestMapping("open")
    public void upload(@RequestParam("id") String id, HttpServletResponse response) {
        response.setHeader("Access-Control-Allow-Origin", "*");
        SysAccessory accessory = sysAccessoryService.getById(id).getData();
        if (accessory == null){
            return;
        }
        String path = viewBasePath + accessory.getPath();
        try {
            response.sendRedirect(path);
        } catch (IOException e) {
            e.printStackTrace();
        }

    }

访问路径：

springboot 将图片url转为pdf springboot 图片预览_前端_02