理解DataURL的基本使用,实现DataURL的文件上传完成基于七牛云的文件上传
理解 JasperReport生命周期
独立完成 JasperReport的入门案例
如图所示,实现员工照片上传功能
所谓DataURL是指"data"类型的Url格式,是在RFC2397中提出的,目的是对于一些“小”的数据,可以在网页中直接嵌入,而不是从外部文件载入。
完整的DataURL语法:DataURL= data:mediatype;base64,<Base64编码的数据>。
mediatype:表述传递的数据的MIME类型(text/html,image/png,image/jpg)
骚戴理解:mediatype;和base64是可选的!
简单的说,data类型的Url大致有下面几种形式。
- data:,<文本数据>
- data:text/plain,<文本数据>
- data:text/html,<html代码>
- data:text/html;base64,<base64编码的html代码>
- data:text/css,<css代码>
- data:text/css;base64,<base64编码的css代码>
- data:text/javascript,<javascript代码>
- data:text/javascript;base64,<base64编码的javascript代码>
- data:image/gif;base64,base64编码的gif图片数据
- data:image/png;base64,base64编码的png图片数据
- data:image/jpeg;base64,base64编码的jpeg图片数据
- data:image/x-icon;base64,base64编码的icon图片数据
对于再程序开发中,使用最多的是基于DataURL的图片形式,接下来以图片形式的DataURL分析其原理和利弊
Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用 img 标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式,并存储在URL中,冠以mime- type。
图片在网页中的使用方法通常是下面这种利用img标记的形式:
这种方式中,img标记的属性指定了一个远程服务器上的资源。当网页加载到浏览器中时,浏览器会针对每个外部资源都向服务器发送一次拉取资源请求,占用网络资源。大多数的浏览器都有一个并发请求数不能超过4个的限制。这意味着,如果一个网页里嵌入了过多的外部资源,这些请求会导致整个页面的加载延迟。而使用Data URL技术,图片数据以base64字符串格式嵌入到了页面中,与HTML成为一体,它的形式如下:
- data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAAA5CAYAAACMNEHAAAAAGXRFWHRTb2Z0d2FyZ
- QBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
- bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU
- 6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy
- 0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyL
- zIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0
- dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3h
- hcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC
- 8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5ZDAxYjE4NC04MTFlLTE4NDEtYTUwYi0wMzljN
- jZmNDA1YWUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUYyRjEwQUFGMEY3MTFFN0IzQUU5ODg2NUEzREJF
- MDMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUYyRjEwQTlGMEY3MTFFN0IzQUU5ODg2NUEzREJFMDMiIHh
- tcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZW
- RGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZDA1ZmRhNzAtMzY1Yi1iNTQwLWE3OTYtOGVjNzJkYTQwZ
- mMyIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6MDM4NzM5MTYtZTQ4ZS0xMWU3LWFl
- NTUtODVlYjU5NWU3MzVlIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3h
- wYWNrZXQgZW5kPSJyIj8+d+H9YQAAE4NJREFUeNrsXQmYFMUVroWVWxAC4kEETxAhSlQMShBQAooH4hlPxCh4i6
- JGkxiNJkbFoKJGjSiKBypyeB/IYcAzEg8uDxQEDERBdpXLZSH1f/tX5lFb3V3d07OLS7/ve9/M9NRUV1f99ep/r
- 44pqjPoYbUZSUOtHbTurXVPra20/lTrT7Q2oxop17pC6zdaP9E6V+sMrf/UWpK0AF0++rvKpOZKcTXfv77Wblp7
- aO2udT+ttT1/i3QtqOgcR/P6eq2vaX1Q69P8nEkm1Qb4+gTnCVp7a21QgGfqTf1c69Van8iaOhNIrSq8175a79P
- 6X62Paz2mAGC3ZRetY7SO09oka+5MiqugQ/XVeoXWrtX4nOhcu2vtqfXrrNkzC18IAW15T+sz1Qx2I3CGX9FaL2
- v2zMKnKT/XOkLrgZvh8+6j9Vqtv03wWzjGl2mdRKfYNVKcrHUP8flOVRFFiiP9qJCVWodo3Vig+tiJ7QVBZGtKN
- bZNa61dtG6vdTu+Dta62vP3j6qKKJ+R27ReovVCrYu0NkUgI03Ab6P1Jq1nay3ajDv5pVpHa52dAIhnUSF7aZ1j
- pfmrqgijQlZpvSHmPeBn3KO1JT9fV0CwK1K8B/n+AxoE428BII1oFPG6FQFVh75XPZbXaGO+LtB6VIKyNKZvJ+V
- Fx7UgOYXlH0CgA4/daISAy/74nBbg+9Ih3SHlBinVOkvrp3R2V/C6qWzE6w9iI/gKGm6Y1sMSPKORzx1gby3ADp
- mu4odEbxVghwxiA7rkJFURyu3jke9Yjja+8geVC/PGlTaOawdr7eTxW7TxtuLzEKs+XLKYz+eSGayjmwj+GfkCv
- g4b6YKUAL6KvRq0YTKBHiVN2YuvsSorTACSjlo/8kzfnMOtkccdjdjB+k1tWpogeVbrfPH5TDF6GNku5Pfo9O1Y
- jih5P2Y7zIoJ+DKOBLDu36qKicLlVtDg4gR42J8aJtNCAI/JyYVsO1DLJvkAHj35SY8CRckGrS9oHcXXNTF/jwq
- +S1WEH5/2BADkHPI7HznBcvAfpfUNa8RDqUGyQAAeeV8tvpvDzr6/GDWXan1bpPlGFU7GiQ5bRov/pdb2gqZ9py
- oiX6Wshxu1vkVKu2ozorCYgxmpdSB8t6SA705wNcujIKgwzOPfzV6Yrywn7XjLYW1dckwMwJ9hUZW5KTcKOv3pz
- Hs+o1royC8LwL/IRguS260RZUKIlQYI2lrt15Yjwb+0/kbrUI4i9fi5L8sky7yMQDdBgOO1Pqb1uYjnvS7P+hoc
- QHVAed/h+x/IEmaw7oCLyUkAj0p8ilw4iSAaMJwNtLKS2bv3kvBhZdBtUZQI9GqqRzl21Lqb1s8i0oE2dBafR/J
- 1PK204e+y4O+y4cPkI4syDWLkZyHrR1mjZ2eOgmlIW/o/NkXaW7QJjMGuvC8MSC+LgkHqq1zIGSPzcRylo+Ravr
- Zgp+4kOtERBGhUAMEF+C9FvSO6cwffX8bXO+IC/qg8wL6ejtOf7eE4CuSutCHAn0ancheP7Dp6AP5CR/7m1by3H
- wCd4t4YddNIjCJBTtpeVCkPFYACNBcda4mgX7+kBTfSgCP0VwTqJ6R+JxBs53nU/Xh2KiWo3QuqgBIH8L3oHCQB
- +2Ra3rlJQJ4A+G96Ar6V/OBYKdncQSMQJuyhNl2qcKKVpq7KxdLDZDo7/wZVeYVnQ0f7rFLpLIa7hnSmq3CUF/F
- 6PQLZ9tfaOKJdkurtLUaNEgvwGM0mClDDiNyskk8CSn9mViEAv09CsJfQoXmYQAkCOirqEK2/UBWTIS3YsHiwNz
- iqzIxxX1+HrqmHdXc1ynAHJbD5tI/0IP3CULyNuL4rOWdzh6M7gDxbWRTn4hAn2u5Mz4j3Zwn+O4pGwJ6Y216Fh
- 36/onNrpNQx4o2k7zdcUA0ZeHg9IO8dHIERRMkuLZSFb8kQWuMEVn0ALYfLqteh9RykchMetmDWshsbYCStxg8e
- 9/ZdMlEa8dxDqiGqcBipSnPBaz9WFTO9e7EjIK78J8/8ylW81aKLhTVvSAp6seDp9cVIVyQAj7YOmszbhc/UNcT
- wfEcQmxnsIo4g9hCOibLLC0VptmLosVVMrn6VqojPb3SAHQ9yKivypzHyPYuW4HKb2jhoza6eeX4f8h0AtXXAd8
- +oXGy7j8W7x8YIyy0V7zGBdqXWI600uHYPo2K/YrgQIUxM0swTfoRLVjMKNsejLLUJyHLShZPZRjuJ0QXhydHCW
- PyNERfsY/iAI/lwVXl+Y6EVoPiWGIHFP4nXTmXk7G7SlCsZBjWyjm0/Ih9rUhSx4+k2FW/CYCkdm+kBVn1nrQ/w
- QZPIWkZXVkREbpYov1lf+CWTHPx9azaKazPKziI6U58WqaHgwa1V/OUA6KD/tjrYGlKqkWJEvF/raapizuFkld+
- yA5T5CvJ2KaAW26lN1wS9z7Akrk0RNAk07Hqtv7fyAPjP5DPJOoVv9aqqiOUvp/HDqH2LGDlcgnuer1IIB4cB/k
- iL60UJHvJwDm8usKOB7lObLvBJIv2EA+QC+89YFh/ZVgyhNuiX07HbYFEkCfj+tLxGxhEAYVJGy1xuXQegnrNGn
- +V2e9Hi2pw5jJ50dQD9bVIkF/WznxdhvnM4arUT/F5GYk7iKGQc+bd53/UOqrk1772vys2ktougoRhNsPL2Q0aD
- vuAI9x++ejvyxSH89YEYIHyFlr3UAfQiDo1XpcRxd4r4vr9nPp+q8LXxGJYP5hB7gWdZ+nveH43XmeAy8ryqmHw
- ayBGwETXIkUsqqxzhTZsjdyGdWM+0MwLSvm910CYcmc4QIOxGfr87R4io5R+lHMFlVKgxHfweAb+5U3lOIroAX0
- RvvblnBcIqHRvgTBYRMINTdOrCnNZmyn/29PmIkOSHzO92ld5aISP7kjZ8ZV0fzWiVdDgXx8y7WYjvITl0U0ek5
- TTS0f0I8uKIaJRLPqGTbeRr0pswAcd/gSP3FLZxO456fRm9C6M8visqnYAfqPxW4ClWzokShJZ1H5Ey2JXFC225
- Wfkvd3gq4vsPGd1YH0EZpnk6g7YVWxczYuIrPn7XEtKOVTRWBpiTBV2RYia40El7i5FirBjpgqzvXDKAX1nXl9F
- feF106vqkxUbmM4QJo9mRo2JntnE56xYj8RtJAY8HGub52/nk06sDwD6UjkaaAuvxbgB/N+vVfWSuRyWNJijDAI
- cGf4l1sMHxfR1VeTa0lI2/3KOcGMrjztB18kyznlTjWI/0A/jaXQD+G3G9XwjgFaNKT9KIvMYRqCVp8PEJsXBASGDBG/C3q00nQMJoxYmy0SywYxr6JpW+XGkiExbYW4tohq8VjJJ1nnmNoaM8ivz3CwH2sVaYcQ0B87Zn3k1Vbl1N
- mhJ3ttY46XISrpW4HrUZ/z2qCjAMSQQW/vO4Pyq2ogQneP7uOvEANtjx8I+o9PfLIpw0wQH2hrzeLEbjjbIvvtn
- x3CSHMPVTuY0hf6BOIfCPd4AdC6PeUj8+aR1A1Vrnme98JULYEYKFfgfl+yDFwrm8xfM3H0ekvcIjkhJX0LnODa
- AMWIC0T4y8rlJ+s7U+4qJQrmiCAfvkmPkvUfE3wF/j4STGFbOct43KrZ8pESNlO1V5PZGvDzjAM+2ANAGP6ew9P
- X+DSYayAOsOznlZypU9n1Z0tWXdDWXoFbOCndPsCY/YgwU/kJ0RFr1uSBSiCa1ieYz868TszJAWMdL6znSbSu8q
- AF8qrvdNCPjOnvQS0j4NMBWHWCqXYCntuJDvMT3cKEWwz2bEaJkF9rqMshwZI6/VjEClvSn6DeoQggHgt5c2tGO
- 9LeL3z8cA7/gCUJQPOQo38eT13wZ0lm/zLMeeMQxtKlKLHPgIz/QjI5yOw1Ms2wekBostsMOpfjUm2CGIz39awL
- pE1ALrh3ZnFOYlRxrs9ZxVhe27MuD6F6rySWxp7eL6roqebUVSC99L+e/6n7CJ91d5qW/nlB4G98EkyPeWg4qZu
- om0mHEE0/+BM8cpnxi8kR0S2oGW/1TW8fUq3nZGRMGGxrz/yYLm/S3EmMijNLAG6saQPKNWjXZUuX0DcaJKmNy6
- 3zOtXLsPDHyZFPDdPNOCVsyLSJPv+Y1r6COg0jZaYMfo8ajyC5tKmaPC94L6WJIhCS3LLDbS70h3hnt29gXCQo+
- KWd6lBNIb7HQuwRwDQnprea+ZliO/VG267zSKZ7cjAKeq6Ik4rM1pIHwq3+f7jMEVYPDupI2JxWOTVfikgZGXlH
- WWi8PCo4H3SliWMQTG5w7n9C8JnWET5VgQlig7E37LkWLlt8NfeQ7FiD8Pi3F/WPTHOfTOtoCuWDbE3zsleDZw6
- kOjwJ7Jlgd43zCWzwzZbQwfDYzIZyqjLGOMY2UBHVGYq6lJTlZYQrDPy5o4ExvwvtKNUZ3/A9+AVFCbcnJW8LJf
- k96AknxNC44zQ6bI6IFjPfth5LptEz4TJsb6ZJY9kyAOv1YFT5jYAmQ7NyjHPYXAAXSMDLcq/5WaLoHDhG1iseL
- DGYffsgA/L4Y1xeQETml9MinoHUDfjZGZ01V+pw4DtVgWW5aBPZMwwD9EsMWRW8mvf/AFvgPooDvYlIsYde08ng
- EzqOerBKdy1SCwt1G5VZpNBWUEPcRG/GeqoUxYFYpNRI9uThVVS0VvhJCCSZXl7CDg4v1dVlmCG+8tsMOZxO4Wh
- DDPyBPsiLF33sLBHiTDWM+7VMO9sbgQYezdN0en9QUCp70H2L+kY/oeqQgWTmHGDuu7MaFQEmLRIWZZQBqCGbqL
- VPzThmsi2Bc4DM9uIekbsCNgAdgSVXlBGwINWGuD9e/Y+ueabDP/n/s108g1SnGAXsSy4J4LVfA/fhTxmRA0mZ+
- PhUcGZ0dwXzi22CGOTRHYUrUPezFm2LALCZNXWDG3axU0LmZ8j2aZ11QRoGazQc3x1135GWrO7BnEz9jO9jrfmx
- WEe4r0ZvXjsfwM4zGO783e2W1FenPP7sLouCiNSQ+jIk8OHq5yESu0N5Y3fMN2XMjv5D7agRzFP2UapB2vcps/A
- M6ZLAe2Wy5mHuYvjkaJe/9RhUfLMOH5GXUOgw23iM47is80jG3wCdO+paJPjQsEPATT0IMtXmxkAx92ECsAywdw
- 3MZfWJDx7O2P5dPzPAXLgTvmw0kTWnezQvRwQcuMGLD0FWnHWdckoHry9QiR3qyI7ONI393Ky4eCYsQ1hzzNYie
- EXMIAQTmd/BfZYcfRWuP9vRwBRhB8wEI/ldsKiA7Uidz8LJYHo8HDxNNMce+Pxb1twW+eZQdCOe5iuYaqyvM4mG
- WfR98RhvkA4jEx4CEP8AHK2KvM+YVr+B2m/bGmBEcidKP16kUO/XqBgY4KxFHMx6vq+dvJCcIJtAHZgwbhENbbe
- AvAtawO0pMWzOSFhW3PMQLWU+QV1KEmeJT3RpXbRogVrufw/UUC+OcxT1hRnCnTmBa2NwGOtNeq3A6tVtZrXY76
- 5xAP+9I43iHuPUbc2xaAGit1p9OQXMDgw32q8tmgU+kvDlW547Db5At4A/pDVe5ckPvI849jVOYQ9toT+eDY0va
- QSm8Hkctv+AcpwdPVyJFBOxaRwnWghZnJoR8W+GBaxRmkXAv5PWax92eaLzgc/5JGoiWt1jwCDY1an3kdymvv8v
- cdWAdmYVgSAUDNlrwPRP1id9SVLN8qlr8nDV6J6HD1Bc1QKncW/DLiIO4aKrPiVZ5t8yAt90QrrUxjDF69NACva
- K1RwY+Qi11Gj3s8K/xjcvpxKr0NuUEg60ILsTKNDPN0Vg1N+StDfa/QdwGILrTSSEt8DWnga/xNY5U7mm6sI/8L
- mOdU1ntt3lMRCBvyMB5G5CnQzQQO9iYvv4id9myVW9dvfj+CPsxIpqnDkX6qire1c6OjLA2Ue0O4PP04r7/TCdp
- oXUr6AuuyHR+6LdPXUYX9K0UjvZT/7v6qkPEWtXhN8NO+gp7Y6Q3vn0SV/F3Sk4ms1yNE/pMC8m9B53c3j3Kb5d
- Q/qNzaot4iGgNL/j2N23EE4ERy9lEqdzTiepVb44SOcANZQHsCciuVW4jo6pQ7ssw78vNHghKa/Ri/Z1kKFruPO
- llgkaAt33EIq6o/rEq1U6UQipwuhtN1/DxJfD/TiqCYv9s0z4LRYIoAwwIlTn5gaO8d8Rl5vynq29AeyCm0xGGb
- J1aI6NFk4XCaUWcK89iZbTtV5U5C60P+/hQpmKJTu46+xxnEwrVkAE1YzpnWvQer3OGrl/N+lwv6jGfagxGYV0i
- tilQBJ8p8j9LYoPz/EbmmSjkpSAkbx2yeeJ/XXMe9PcHv3mRnWUlgldChC0o/j9SxjBGMEoKvTHS4EpU77tv8g0
- iJMBSjeT+M0PvRisInu1T4Hu3pJxzG3z5IalWPIUV0hj/xO7NEG87jkwxB/5GBjtnMw0RnHuG9W/LedRn8KBGh5
- KX0Vd7lSNWLHeVSldtov5q/WWuFyEuS4jHquOy0ZRvlv7CraVrcPSUL/2OUrVTuP1PLLEO3La2yaw8qAN9Ihf+T
- ShEBHZRH0L1d0pjcfVmh6XKxyqQmS5na9E8X5Ii9NOR3ay2rGkQ5lya4d5DPWFoVFVJrM26sjRleM9kSAI//7ey
- iKv8RVyaZ1ChK87LadGYvk0xqJOCn0dufljVHJjWZ0gDgmHTonoE9k5ps4TFhg8msqVn1Z1LV8j8BBgDJTf+jYX
- O34QAAAABJRU5ErkJggg==
上面的base64字符串中你看不出任何跟图片相关的东西,但下面,我们将传统的 img 写法和现在的Data URL用法左右对比显示,你就能看出它们是完全一样的效果。但实际上它们是不一样的,它们一个是引用了外部资源,一个是使用了Data URL。
- <body>
- <p>
- <h4>普通URL</h4>
- <image src="http://www.itcast.cn/2018czgw/images/logo.png">
- </p>
- <br/>
- <p>
- <h4>Data URL</h4>
- <image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAAA5CAYAAACMNEHAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5ZDAxYjE4NC04MTFlLTE4NDEtYTUwYi0wMzljNjZmNDA1YWUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUYyRjEwQUFGMEY3MTFFN0IzQUU5ODg2NUEzREJFMDMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUYyRjEwQTlGMEY3MTFFN0IzQUU5ODg2NUEzREJFMDMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZDA1ZmRhNzAtMzY1Yi1iNTQwLWE3OTYtOGVjNzJkYTQwZmMyIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6MDM4NzM5MTYtZTQ4ZS0xMWU3LWFlNTUt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">
- </p>
- </body>
骚戴理解:可以通过代码看到普通的url是把图片资源放到了服务器上面,然后通过发请求的方式去获取图片资源再显示的页面上面,图片资源通常是转化为二进制或者字节流来进行展示在页面的,Data url是把图片资源通过base64编码的方式变成一长串的字符串,也就是Data url的这一长串字符串其实就是图片资源,不过通过base64加密后变成了字符串,原本是二进制或字节流,这就导致Data url占用的数据容量比普通url更大一些,所以Data url也被叫做带有数据的url!
几乎所有的现代浏览器都支持Data URL格式,包括火狐浏览器,谷歌浏览器,Safari浏览器,opera浏览器。IE8也支持,但有部分限制,IE9完全支持。
Base64编码的数据体积是原数据的体积4/3,也就是DataURL形式的图片会比二进制格式的图片体积大1/3。
DataURL形式的数据不会占用HTTP会话,所以再访问外部资源或当图片是在服务器端用程序动态生成时借用DataURL是一个不错的选择
骚戴理解:普通url是要发http请求的,这就会占用网络资源,如果图片很多的话那就会导致图片加载速度太慢,所以在图片资源所占的数据容量不大的情况下,可以用data url,因为data url本身就包含图片资源,但是如果图片资源所占的数据容量大的情况下,还是普通的url更好
- @RequestMapping(value="/user/upload/{id}")
- public Result upload(@PathVariable String id,@RequestParam(name = "file") MultipartFile file) throws Exception {
- String image = userService.uploadImage(id, file);
- return new Result(ResultCode.SUCCESS,image);
- }
骚戴理解:这里我经常犯错误,我一直觉得处理器的参数和请求路径一一对应,其实是错误的,应该是和前端传过来的数据一一对应,例如这里前端传了id和图片的二进制流,那么就处理器就对应着有这两个参数,同时注意图片资源在后端用到的注解是@RequestParam,不是@RequestBody!!!
- public String uploadImage(String id, MultipartFile file) throws Exception {
- //根据id查询用户
- User user = userDao.findById(id).get();
- //对上传文件进行Base64编码
- String s = Base64.encode(file.getBytes());
- //拼接DataURL数据头
- String dataUrl = new String("data:image/jpg;base64,"+s);
- user.setStaffPhoto(dataUrl);
- //保存图片信息
- userDao.save(user);
- return dataUrl;
- }
骚戴理解: Base64在导包的时候不要导错包了!应该导下面这个路径的包
不过可以看到这个路径已经被淘汰了!但是用也可以用咯!
骚戴理解:这里用的data url的方法来实现图片,并且可以把生成的data url放在数据库里,这个staff_photo就是存储data url的字段,可以看到数据类型是mediumtext,可以看到这样的话数据库内存就更大了,这也是data url最大的缺点!所以data url只适合小型图片,也就是存储容量比较小的图片!像那种几十M的图片就不能用data url!这样的大型图片可以用像七牛云这样的第三方云存储来存储图片!
解释一下mediumtext:在MySQL中,mediumtext是一种数据类型,用于存储medium长度的文本字符数据,最大长度为16,777,215个字符(约16MB)。与其他文本类型text和longtext相比,mediumtext的长度介于它们之间。适用于需要存储较长的文本数据但又不至于过于庞大的情况。例如存储网页内容或较长的文章文本等。
需要注意的是,由于mediumtext类型允许存储非常大的文本值,因此对于包含大量文本记录的表,查询和写入速度可能会变慢,并且也会占据大量的存储空间。选择合适的文本类型并合理使用数据库索引可以提高查询效率,减小数据存储空间的使用。
七牛云对象存储服务提供高可靠、强安全、低成本、可扩展的非结构化数据的存储服务。它提供简单的 Web 服务接口,可以通过七牛开发者平台或客户端存储和检索任意数量的数据,支持 “按使用付费” 模式,可以通过调用REST API 接口和 SDK开发工具包访问,下载协议采用HTTP 和 HTTPS 协议。方便程序员聚焦业务应用,而无需关注底层存储实现技术。
使用七牛云实现图片存储也比较简单只需要按照如下的步骤操作即可:
七牛云是通过邮箱注册的,注册激活后就进行认证,认证后即可开通对象存储业务了
点击左侧左侧菜单对象存储,一开始我们需要新建一个存储空间来存放我们的图片资源。点击新建存储空间,设置一些需要的内容,然后在左侧的存储空间列表我们就可以看到新加的空间了。
账号注册有些需要注意的点如下:
注册账号之后需要实名认证(个人/企业) 实名认证之后才可以创建存储空间
存储空间创建成功之后,找到个人中心获取accessKey,secretKey和存储空间名称就可以进行上传操作了
七牛对象存储将数据文件以资源的形式上传到空间中。可以创建一个或者多个空间,然后向每个空间中上传一个或 多个文件。通过获取已上传文件的地址进行文件的分享和下载
- <dependency>
- <groupId>com.qiniu</groupId>
- <artifactId>qiniu-java-sdk</artifactId>
- <version>[7.2.0, 7.2.99]</version>
- </dependency>
- @Test
- public void testUploadImage() {
- Configuration cfg = new Configuration(Zone.zone0());
- UploadManager uploadManager = new UploadManager(cfg);
- String accessKey = "COuoDRVa7JLsuurzIvQSI_pEDceHDw3yGfJEmvwv";
- String secretKey = "3RWpTjB5Jxg3QosUFr4mxbHXJ5JR2m6AHQqYsSlr";
- String bucket = "test-bucket";
- String localFilePath = "C:\\Users\\ThinkPad\\Desktop\\ihrm\\day9\\资源\\照片\\001.png";
- //默认不指定key的情况下,以文件内容的hash值作为文件名
- String key = "test";
- Auth auth = Auth.create(accessKey, secretKey);
- String upToken = auth.uploadToken(bucket);
- try {
- Response response = uploadManager.put(localFilePath, key, upToken);
- //解析上传成功的结果
- DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
- System.out.println(response.bodyString());
- } catch (QiniuException ex) {
- Response r = ex.response;
- System.err.println(r.toString());
- try {
- System.err.println(r.bodyString());
- } catch (QiniuException ex2) {
- //ignore
- }
- }
- }
骚戴理解:覆盖上传只需要把代码改成下面 String upToken = auth.uploadToken(bucket,key);即可,七牛云有保护机制
- @Test
- public void testUploadImage1() {
- Configuration cfg = new Configuration(Zone.zone0());
- String accessKey = "COuoDRVa7JLsuurzIvQSI_pEDceHDw3yGfJEmvwv";
- String secretKey = "3RWpTjB5Jxg3QosUFr4mxbHXJ5JR2m6AHQqYsSlr";
- String bucket = "test-bucket";
- String key = "test";
- Auth auth = Auth.create(accessKey, secretKey);
- String upToken = auth.uploadToken(bucket);
- String localFilePath = "C:\\Users\\ThinkPad\\Desktop\\ihrm\\day9\\资源\\test.xlsx";
-
- //断点续传
- String localTempDir = Paths.get(System.getProperty("java.io.tmpdir"), bucket).toString();
- System.out.println(localTempDir);
- try {
- //设置断点续传文件进度保存目录
- FileRecorder fileRecorder = new FileRecorder(localTempDir);
- UploadManager uploadManager = new UploadManager(cfg, fileRecorder);
- try {
- Response response = uploadManager.put(localFilePath, key, upToken);
- //解析上传成功的结果
- DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
- System.out.println(putRet.key);
- System.out.println(putRet.hash);
- } catch (QiniuException ex) {
- Response r = ex.response;
- System.err.println(r.toString());
- try {
- System.err.println(r.bodyString());
- } catch (QiniuException ex2) {
- //ignore
- }
- }
- } catch (IOException ex) {
- ex.printStackTrace();
- }
- }
骚戴理解:七牛云的断点续传是一种传输文件的技术,可以自动从上传失败或中断处重新开始上传,并继续上次未完成的传输操作。这个功能可以很好地解决大文件上传时网络不稳定、上传速度慢等问题而导致的上传失败等情况,提高了文件上传的成功率和效率。实现原理其实就是通过临时文件的形式,把已经上传的内容记录下来,包括位置,下次再从这个位置继续上传!适合传输大文件!
对于公开空间,其访问的链接主要是将空间绑定的域名(可以是七牛空间的默认域名或者是绑定的自定义域名)拼接上空间里面的文件名即可访问,标准情况下需要在拼接链接之前,将文件名进行urlencode符。
- <dependency>
- <groupId>com.qiniu</groupId>
- <artifactId>qiniu-java-sdk</artifactId>
- <version>[7.2.0, 7.2.99]</version>
- </dependency>
- <dependency>
- <groupId>com.google.code.gson</groupId>
- <artifactId>gson</artifactId>
- <version>2.8.9</version>
- </dependency>
- package com.ihrm.system.utils;
-
- import com.google.gson.Gson;
- import com.qiniu.common.Zone;
- import com.qiniu.http.Response;
- import com.qiniu.storage.Configuration;
- import com.qiniu.storage.UploadManager;
- import com.qiniu.storage.model.DefaultPutRet;
- import com.qiniu.util.Auth;
-
- import java.util.Date;
-
- public class QiniuUploadUtil {
-
- private static final String accessKey = "COuoDRVa7JLsuurzIvQSI_pEDceHDw3yGfJEmvwv";
- private static final String secretKey = "3RWpTjB5Jxg3QosUFr4mxbHXJ5JR2m6AHQqYsSlr";
- //bucket是指的七牛云存储空间的名称
- private static final String bucket = "ihrm-bucket";
- //七牛云存储空间生成的域名地址
- private static final String prix = "http://pkbivgfrm.bkt.clouddn.com/";
- private UploadManager manager;
-
- public QiniuUploadUtil() {
- //初始化基本配置
- Configuration cfg = new Configuration(Zone.zone0());
- //创建上传管理器
- manager = new UploadManager(cfg);
- }
-
- //文件名 = key
- //文件的byte数组
- public String upload(String imgName , byte [] bytes) {
- Auth auth = Auth.create(accessKey, secretKey);
- //构造覆盖上传token
- String upToken = auth.uploadToken(bucket,imgName);
- try {
- Response response = manager.put(bytes, imgName, upToken);
- DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
- //返回请求地址
- return prix+putRet.key+"?t="+new Date().getTime();
- } catch (Exception ex) {
- ex.printStackTrace();
- }
- return null;
- }
- }
骚戴理解:这个工具类只需要修改accessKey、secretKey、bucket、prix这四个参数即可,然后这里用的是覆盖上传,调用上传方法会返回一个能访问的url地址,也就是下面这行代码
- //例如http://ruya1a2n3.hd-bkt.clouddn.com/1659438854295257088?t=1684575706082
- return prix+putRet.key+"?t="+new Date().getTime();
这个地址是由七牛云存储空间生成的域名地址(30天后会过期)+文件名称+时间戳组成的,这个时间戳是因为七牛云有缓存机制,你修改图片后可以还是用的缓存里的图片,加个时间戳就可以解决这个问题!还要注意一个点,就是存储空间的地区变了那么下面的这个Zone.zone0()代码也要变,Zone.zone0()指的是华东地区的,七牛云Java SDK还支持其他几个基础API服务地区和区域配置,如下所示:
使用七牛云实现用户头像上传
修改UserService方法
- public String uploadImage(String id, MultipartFile file) throws Exception {
- User user = userDao.findById(id).get();
- String key = new QiniuUploadUtil().upload(user.getId(), file.getBytes());
- if(key != null) {
- user.setStaffPhoto(key);
- userDao.save(user);
- }
- return key;
- }
骚戴理解:这里会用QiniuUploadUtil工具类就可,知道upload方法两个参数是什么意思即可,第一个参数是文件名称,这里用的用户id作为文件名,第二个就是图片的二进制流
在企业级应用开发中,报表生成、报表打印下载是其重要的一个环节。在之前的课程中我们已经学习了报表中比较 重要的一种:Excel报表。其实除了Excel报表之外,PDF报表也有广泛的应用场景,必须用户详细资料,用户简历等。接下来的课程,我们就来共同学习PDF报表
目前世面上比较流行的制作PDF报表的工具如下:
JasperReport是一个强大、灵活的报表生成工具,能够展示丰富的页面内容,并将之转换成PDF,HTML,或者 XML格式。该库完全由Java写成,可以用于在各种Java应用程序,包括J2EE,Web应用程序中生成动态内容。只需要将JasperReport引入工程中即可完成PDF报表的编译、显示、输出等工作。
在开源的JAVA报表工具中,JASPER Report发展是比较好的,比一些商业的报表引擎做得还好,如支持了十字交叉报表、统计报表、图形报表,支持多种报表格式的输出,如PDF、RTF、XML、CSV、XHTML、TEXT、DOCX以及OpenOffice。
数据源支持更多,常用 JDBC SQL查询、XML文件、CSV文件 、HQL(Hibernate查询),HBase,JAVA集合等。还允许你义自己的数据源,通过JASPER文件及数据源,JASPER就能生成最终用户想要的文档格式。
通常我们提到PDF报表的时候,浮现在脑海中的是最终的PDF文档文件。在JasperReports中,这只是报表生命周期 的最后阶段。通过JasperReports生成PDF报表一共要经过三个阶段,我们称之为 JasperReport的生命周期,这三个阶段为:设计(Design)阶段、执行(Execution)阶段以及输出(Export)阶段,如下图所示:
骚戴理解:这里结合下面的原理进行分析,设计阶段其实就是设计pdf的样式,根据jrxml文件生成jasper文件,执行阶段就是根据jasper文件生成jrprint文件,输出阶段就是根据jrprint生成指定的报表,比如说pdf报表
骚戴理解:Jasper文件和Jrprint文件有什么区别?
Jasper文件和Jrprint文件都是JasperReports报表库所使用的文件格式,但它们在生成和使用上有一些区别。
总之,Jasper文件主要用于设计与编译报表模板,而Jrprint文件用于展示或处理已经生成的完整报表。需要注意的是,Jasper文件和Jrprint文件都不能直接打开或修改,必须通过相关的JasperReports库来进行操作。
Jaspersoft Studio是JasperReports库和JasperReports服务器的基于Eclipse的报告设计器; 它可以作为Eclipse插件或作为独立的应用程序使用。Jaspersoft Studio允许您创建包含图表,图像,子报表,交叉表等的复杂布局。您可以通过JDBC,TableModels,JavaBeans,XML,Hibernate,大数据(如Hive),CSV,XML / A以及自定义来源等各种来源访问数据,然后将报告发布为PDF,RTF, XML,XLS,CSV,HTML,XHTML,文本,DOCX或OpenOffice。
Jaspersoft Studio 是一个可视化的报表设计工具,使用该软件可以方便地对报表进行可视化的设计,设计结果为格式.jrxml 的 XML 文件,并且可以把.jrxml 文件编译成.jasper 格式文件方便 JasperReport 报表引擎解析、显示。
到JasperReport官网下载 Download Jaspersoft Business Intelligence Suite | Jaspersoft Community
下载 Library Jar包(传统导入jar包工程需下载)和模板设计器Jaspersoft studio。并安装Jaspersoft studio,安装的过程比较简单,一直下一步直至安装成功即可。
骚戴理解:安装下面这个,别安装错了!
如图所示,报表模板被垂直的分层,每一个部分都是一个Band,每一个Band的特点不同:
骚戴理解:上面的这些都是可以按delete按钮删除的!注意在玩的时候需要先ctrl+s进行保存然后才可以在Preview里面预览到效果!
右键单机模板文件 -> compile Report 对模板进行编译,生成.jasper文件
骚戴理解:首先在Jaspersoft Studio 里面通过拖拽的方式设计好模板,设计模板的时候其实就是jrxml文件,然后通过编译变成jasper文件,jasper文件才是Java代码里要用到的,后续会把这个jasper文件放在Resource目录下!在Java代码里对jasper文件填充数据生成jrprint文件,然后以pdf报表的形式展示在前端!
可以看到编译后就会生成jasper文件,然后把这个文件导入项目里即可!
新建SpringBoot工程引入坐标
- <parent>
- <groupId>org.springframework.boot</groupId>
- <artifactId>spring-boot-starter-parent</artifactId>
- <version>2.0.5.RELEASE</version>
- <relativePath/>
- </parent>
- <dependencies>
- <dependency>
- <groupId>org.springframework.boot</groupId>
- <artifactId>spring-boot-starter-web</artifactId>
- </dependency>
- <dependency>
- <groupId>org.springframework.boot</groupId>
- <artifactId>spring-boot-starter-thymeleaf</artifactId>
- </dependency>
- <dependency>
- <groupId>net.sf.jasperreports</groupId>
- <artifactId>jasperreports</artifactId>
- <version>6.5.0</version>
- </dependency>
- <dependency>
- <groupId>org.olap4j</groupId>
- <artifactId>olap4j</artifactId>
- <version>1.2.0</version>
- </dependency>
- <dependency>
- <groupId>com.lowagie</groupId>
- <artifactId>itext</artifactId>
- <version>2.1.7</version>
- </dependency>
- <dependency>
- <groupId>org.apache.poi</groupId>
- <artifactId>poi</artifactId>
- <version>4.0.1</version>
- </dependency>
- <dependency>
- <groupId>org.apache.poi</groupId>
- <artifactId>poi-ooxml</artifactId>
- <version>4.0.1</version>
- </dependency>
- <dependency>
- <groupId>org.apache.poi</groupId>
- <artifactId>poi-ooxml-schemas</artifactId>
- <version>4.0.1</version>
- </dependency>
- </dependencies>
引入配置文件
- server:
- port: 8181
- spring:
- application:
- name: jasper-demo #指定服务名
- resources:
- static-locations: classpath:/templates/
- datasource:
- driver-class-name: com.mysql.jdbc.Driver
- url: jdbc:mysql://localhost:3306/ihrm?useUnicode=true&characterEncoding=utf8
- username: root
- password: 111111
创建启动类
- @SpringBootApplication(scanBasePackages = "cn.itcast")
- public class JasperApplication {
- public static void main(String[] args) {
- SpringApplication.run(JasperApplication.class, args);
- }
- }
导入生成的.jasper文件
创建测试controller
- package cn.itcast.controller;
-
- import net.sf.jasperreports.engine.*;
- import org.springframework.core.io.ClassPathResource;
- import org.springframework.core.io.Resource;
- import org.springframework.web.bind.annotation.GetMapping;
- import org.springframework.web.bind.annotation.RestController;
-
- import javax.servlet.ServletOutputStream;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
- import java.io.FileInputStream;
- import java.io.IOException;
- import java.util.HashMap;
-
- @RestController
- public class JasperController {
-
- @GetMapping("/testJasper")
- public void createPdf(HttpServletRequest request, HttpServletResponse response) throws IOException {
- //1.引入jasper文件
- Resource resource = new ClassPathResource("templates/test.jasper");
- FileInputStream fis = new FileInputStream(resource.getFile());
- //2.创建JasperPrint,向jasper文件中填充数据
-
- ServletOutputStream os = response.getOutputStream();
- try {
- /**
- * fis: jasper文件输入流
- * new HashMap :向模板中输入的参数
- * JasperDataSource:数据源(和数据库数据源不同)
- * 填充模板的数据来源(connection,javaBean,Map)
- * 填充空数据来源:JREmptyDataSource
- */
- JasperPrint print = JasperFillManager.fillReport(fis, new HashMap<>(),new JREmptyDataSource());
- //3.将JasperPrint已PDF的形式输出
- JasperExportManager.exportReportToPdfStream(print,os);
-
- } catch (JRException e) {
- e.printStackTrace();
- }finally {
- os.flush();
- }
- }
- }
骚戴理解:下面这句代码是把jasper文件进行填充数据,然后生成jrprint对象(文件),注意这三个参数的含义就好
JasperPrint print = JasperFillManager.fillReport(fis, new HashMap<>(),new JREmptyDataSource());
还要一行核心代码就是指定通过什么方式把jrprint文件导出,这里指定通过pdf导出流来导出!
JasperExportManager.exportReportToPdfStream(print,os);
- net.sf.jasperreports.extension.registry.factory.simple.font.families=net.sf.jasperreports.engine.fonts.SimpleFontExtensionsRegistryFactory
- net.sf.jasperreports.extension.simple.font.families.lobstertwo=stsong/fonts.xml
- <?xml version="1.0" encoding="UTF-8"?>
- <fontFamilies>
- <!--<fontFamily name="Lobster Two">-->
- <!--<normal>lobstertwo/LobsterTwo-Regular.otf</normal>-->
- <!--<bold>lobstertwo/LobsterTwo-Bold.otf</bold>-->
- <!--<italic>lobstertwo/LobsterTwo-Italic.otf</italic>-->
- <!--<boldItalic>lobstertwo/LobsterTwo-BoldItalic.otf</boldItalic>-->
- <!--<pdfEncoding>Identity-H</pdfEncoding>-->
- <!--<pdfEmbedded>true</pdfEmbedded>-->
- <!--<!–-->
- <!--<exportFonts>-->
- <!--<export key="net.sf.jasperreports.html">'Lobster Two', 'Times New Roman', Times, serif</export>-->
- <!--</exportFonts>-->
- <!--–>-->
- <!--</fontFamily>-->
- <fontFamily name="华文宋体">
- <normal>stsong/stsong.TTF</normal>
- <bold>stsong/stsong.TTF</bold>
- <italic>stsong/stsong.TTF</italic>
- <boldItalic>stsong/stsong.TTF</boldItalic>
- <pdfEncoding>Identity-H</pdfEncoding>
- <pdfEmbedded>true</pdfEmbedded>
- <exportFonts>
- <export key="net.sf.jasperreports.html">'华文宋体', Arial, Helvetica, sansserif</export>
- <export key="net.sf.jasperreports.xhtml">'华文宋体', Arial, Helvetica, sansserif</export>
- </exportFonts>
- <!--
- <locales>
- <locale>en_US</locale>
- <locale>de_DE</locale>
- </locales>
- -->
- </fontFamily>
- </fontFamilies>