上传图片存储到数据库的几种方式

最新推荐文章于 2024-09-10 10:27:55 发布

千夜一梦

最新推荐文章于 2024-09-10 10:27:55 发布

阅读量1.7w

点赞数 4

分类专栏：前端

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、思路

我们首先要知道上传图片到后台的思路。

1、上传文件流到数据库

2、上传base64或者blob到数据库

3、当图片很多的时间，需要建立一个图片库，专门保存图片。然后将图片路径存到数据库

二、限制性

就我目前的眼见来看，前两种方法当你的图片太大的话就不适用了。我用的是在前台将图片转换为base64然后传到后台保存导数据库，这样下次直接取出来放到src属性中就可以显示图片了。第三种方式其实应该是很常用地。

三、代码

3.1 将图片转换为base64

3.1.1前台js转

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>nick getBase64</title>
</head>
<body>
<input accept="image/gif,image/jpeg,image/jpg,image/png" type="file" id="up" />
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(function() {
        $("#up").change(function() {
            var file = this.files[0];
            if(undefined == file){
                return ;
            }
            r = new FileReader();
            r.readAsDataURL(file);
            r.onload = function(e) {
                var base64 = e.target.result;
                var _file = dataURLtoBlob(base64); // c就是base64字符串
                console.log(base64)
            }
        });
      
    });
</script>
</body>
</html>

3.1.2后台转

 File file = new File(imageUrl);//图片的绝对路径

        FileInputStream is = new FileInputStream(file);
        byte[] data = new byte[is.available()];
        is.read(data);
        is.close();
        BASE64Encoder encoder = new BASE64Encoder();
        String base64Img =  encoder.encode(data);
        System.out.print(base64Img);

3.2 base64与blob的互转

 //**dataURL to blob**
                    function dataURLtoBlob(dataurl) {
                        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                        while (n--) {
                            u8arr[n] = bstr.charCodeAt(n);
                        }
                        return new Blob([u8arr], { type: mime });
                    }

                    //**blob to dataURL**
                    function blobToDataURL(blob, callback) {
                        var a = new FileReader();
                        a.onload = function (e) { callback(e.target.result); };
                        a.readAsDataURL(blob);
                    }

3.3base64转换为流

public void startDownFTP1(HttpServletRequest request,
			HttpServletResponse response) throws Exception {
		FtpConfig list = null;
		flag1 = false;
		list = ftpConfigServiceI.findObjectByPK(null);
		FtpConfigController.connectFtp(list);
		String efilename = request.getParameter("efilename");
		//2017年3月10日10:19:37 sfb
		String imagepath = request.getParameter("imagepath");
		String img = FtpConfigController.downloadFile1(list,
				efilename, imagepath);// 下载ftp文件测试 ftp /图片名称/文件夹 已通过解密但是有Base64加密
		Base64 endcoder=new Base64();
		byte [] images;//返回图像
		images=endcoder.decodeBase64(img);//Base64转换成byte数组
		response.reset();
		response.getOutputStream().write(images);
		flag1 = true;
		FtpConfigController.closeFtp();
 
	}