保存图片到Oracle的CLOB字段,并提供下载功能。

前端上传图片后端存到Oracle的CLOB字段中

前端测试代码

<div>
        <p>(点击头像开始选择新头像)</p><br>
        <p >
            <img class="user-header" style="width: 100px;height: 100px;object-fit: cover;" >
        </p>
        <br>
        <form id="test">
            <input type="file" name=file onchange="imgChange(event)" id="file" style="display: none"/>
        </form>
        <button data-role="none" onclick="testUpload();" class="btn btn-info">保存头像</button>
</div>

js代码提交事件

//点击div之后把上传的图片地址传递给src显示到界面上
function imgChange(e) {
        console.info(e.target.files[0]);//图片文件
        //这个也是文件的路径和上面的dom.value是一样的
        console.log(e.target.value);
        var reader = new FileReader();
        reader.onload = (function (file) {
            return function (e) {
                $('.user-header').attr('src',this.result);
            };
        })(e.target.files[0]);
        reader.readAsDataURL(e.target.files[0]);
    }
	//img标签触发选择文件上传
    $('.user-header').click(function () {
        $("#file").click();
    });
    //保存头像发送ajax请求
    function testUpload(){
        var form = new FormData();
        form.append('id','123456');
        form.append('file',$("#file")[0].files[0]);//要上传文件
        form.append('FILE_TYPE',$("#file")[0].files[0].name.substring($("#file")[0].files[0].name.lastIndexOf(".")+1));
        form.append('CREATE_USER',"zjg");
        form.append('FILE_DETAIL',"文件详细信息");
        form.append('CREATE_ACCOUNT',"12345");
        $.ajax({
            url:"${root!}/web/website/img",
            data:form,
            type:"POST",
            processData:false,
            contentType:false,
            success : function(result){
                console.log(result);
            },
        });
    }

后端代码

@ResponseBody
    @RequestMapping("/img")
    public Result img(@RequestParam(value = "file",required = false) MultipartFile file,HttpServletRequest request, HttpServletResponse response) throws Exception {
        response.setHeader("Access-Control-Allow-Origin", "*");
        //新建好要放信息的实体类
        UserBean bean = new UserBean();
        try {//USER_ID作为查询的关键字段
            String USER_ID = request.getParameter("USER_ID");
            InputStream inputStream= null;
            if (StringUtil.isNotEmpty(USER_ID)) {
                String result ==webSiteService.getUserIsSupplier(USER_ID);
                if (result.equals("0")) {
                    bean.setID(USER_ID);
                    inputStream= file.getInputStream();
                    byte[] byteFile = null;
                    //把输入流复制到字节数组
                    byteFile=FileCopyUtils.copyToByteArray(inputStream);
                    //放进实体类之前要把字节转换成字符串,方法在下面
                    bean.setYYZZ_FILE(byte2hex(byteFile));
                    //存到数据库
                    webSiteService.updateUser(bean);
                    return Result.success("success", bean);
                } else {
                    return Result.error("error", "用户已经是供应商,无需重复注册!");
                }
            } else {
                return Result.error("error", "检查输入信息的完整性!");
            }
        }catch (Exception e){
            e.printStackTrace();
            return Result.error("error",e.getMessage());
        }

提供下载图片功能

@RequestMapping("/download/img")
    public void downloadimg(HttpServletRequest request,HttpServletResponse response){
        response.setHeader("Access-Control-Allow-Origin", "*");
        String id=request.getParameter("id");
        //根据前段传过来的id找到CLOB字段数据
        UserBean bean=webSiteService.getGongYingShangDetail(id);
        OutputStream os = null;//输出流
        //字节数组输入流,用于读取CLOB字段
        ByteArrayInputStream bin=null;
        try {
            response.setContentType("multipart/form-data");
            //处理下载弹出框名字的编码问题
            //设置响应头和文件名字以及编码方式
            response.setHeader("Content-Disposition", "attachment;fileName=\"" + new String(bean.getNAME_OF_BIDDER().getBytes ("gb2312"), "ISO8859-1" )+ "\"");
            os = response.getOutputStream();
            //将CLOB中的字符串转换成字节数据到流中
            bin = new ByteArrayInputStream(hex2byte(bean.getYYZZ_FILE()));
            int len=0;//标志位
            byte[] buffer=new byte[1024];//块读可以提高效率
            while((len=bin.read(buffer))>0){//从输入流中读取到字节数组中
                os.write(buffer,0,len);//输出流写出来
            }
            os.flush();//把缓冲区的数据一次性刷出去
    } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

转换方法

/**
     * 二进制转字符串
     * @param b byte数组
     * @return 二进制字符串
     */
    public static String byte2hex(byte[] b){
        StringBuffer sb = new StringBuffer();
        String stmp = "";
        for (int n = 0; n < b.length; n++) {
            stmp = Integer.toHexString(b[n] & 0XFF);
            if (stmp.length() == 1) {
                sb.append("0" + stmp);
            } else {
                sb.append(stmp);
            }
        }
        return sb.toString();

    }
        /**
         * 字符串转二进制
         * @param str 字符串
         * @return byte数组
         */

        public static byte[] hex2byte(String str) {
            if (str == null)
                return null;
            str = str.trim();
            int len = str.length();
            if (len == 0 || len % 2 == 1)
                return null;
            byte[] b = new byte[len / 2];
            try {
                for (int i = 0; i < str.length(); i += 2) {
                    b[i / 2] = (byte) Integer.decode("0X" + str.substring(i, i + 2)).intValue();
                }
                return b;
            } catch (Exception e) {
                return null;
            }
        }

如果文件上传img的request通过request.getParameter(“FILE_TYPE”);拿不到参数可以尝试添加以下代码:

if (contentType != null && contentType.contains("multipart/form-data")) {
                MultipartResolver resolver = new CommonsMultipartResolver(request.getSession().getServletContext());
                MultipartHttpServletRequest multipartRequest = resolver.resolveMultipart(request);
                // 将转化后的 request 放入过滤链中
                request = multipartRequest;
            }

该篇文章部分转载于:附上大哥链接

转化方法现在还没看明白emmm;为提高点击率附上老婆图片一张。

世界美好,热爱生活

祝点赞的小哥哥越来越帅,评论的小姐姐越来越漂亮。

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值