在 Javascript 中解码 Base64 Java 编码的字符串

Question

我用 Java 将一个字符串编码为一个byte[] ：

byte[] head = ("data:image/" + FilenameUtils.getExtension(file.getName()) + ";base64,").getBytes();
byte[] data = Base64.getEncoder().encode(Files.readAllBytes(file.toPath()));

ByteArrayOutputStream byteStream = new ByteArrayOutputStream();
byteStream.write(head);
byteStream.write(data);

return Base64.getEncoder().encode(byteStream.toByteArray());

如何使用 Javascript 解码客户端？
我尝试使用atob ，但它没有给我正确的字符串：

atob(javaEncodedByteArray);

我可以用 Java 很好地解码它：

Base64.getDecoder().decode(javaEncodedByteArray);

但我找不到如何在 Javascript 中做到这一点。

这是一个示例数据：

基本字符串：

data:image/;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAyADIDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD3+vHPEN1q1n4l1eFvF89nBBOm3zBLt/eqXVVCbugyOcdK9jrwv4i/8jFr3/Xzaf8Aohq78uXNUafb9UcGYPlpprv+jHWt/ql7dw2tv4/LzzyLHGuLkZZjgDJTHU1G2qarEsf2jx28EjxJL5bicsodQwztUjOCOhNYXhe3n/4STRrnyZPIGowR+btO3dvB256Zxzima1bTyXInSGRoYrO0EkiqSqZgjxk9BmvX9lHn5f0X+R5XtZcnN+r/AMzpra91m7ntUt/G09ws13DaMYRNmMyE4JDhcj5T0Ne4V88+Ef8Aj5s/+w1Yfzlr6Gry8xioyUV+nl2PTy6XNFyYUUUV5p6IV4X8Rf8AkYte/wCvm0/9ENXuleKeOI2bxhrMU2lX91DNJbyI9u2zBWHHUowP3v0r0Mtdqr9P1RwZir0l6/oznfC2pXi6zpGmCdhZNqlvOYuMFwwGfXp/T0pmr6newK+nRXDraXNrZtLEOjFYIyP8+w9BVnT1g07UrW+i8O6w0ltMkyq1wMEqQQD+56cVHNEl2YpLnQNWMywxRMY5tqnYipkAxHGQvqa9jT2nNbT5bnka8nLfX57EvhH/AI+bP/sNWH85a+hq8E0GIx6vpltbaNqUCtqlrNJLO+8AIxHaNcffJzntXvdeTmbvNM9TLVaDQUUUV5p6QV4b4+i0xvH1+Z7y7S4JiyiWaSLny0xyZBnt1Fe5V4943h8QN4wvzY6F9qtj5eyb+yUm3fu1z85Qk85HXjGK78udqr1tp/kcOYK9JaX1/wAzlNattNTWrxb25u7e5EpEkMOnRKiH0AWbGKq29vozXMQjv795C4Cq2nxkE54BBmx+ddRp3hvxjqURlXRdNt05x9p0+3jJI7bSmf0xT5vC3jSCzNw2i6WxXJaJLO1ZwB3wF5+gyfavVVaK93nX3r/I8t0W/e5H9z/zM+yt9Oj+IFoJri6ivF1OPdAljGkav5g+UbZSAM8cZ/Gve68N0GHxKPEWmGfw75UIu4vMk/sZE2LvGTu8sbcDvnivcq8zMG+aN3fQ9LL0uWVlbUKKKK849AKKKKACiiigAooooAKKKKAP/9k=

编码字节[]（在Javascript中接收）：

WkdGMFlUcHBiV0ZuWlM4N1ltRnpaVFkwTEM4NWFpODBRVUZSVTJ0YVNsSm5RVUpCWjBGQlFWRkJRa0ZCUkM4eWQwSkVRVUZuUjBKblkwZENVV2RJUW5kalNrTlJaMHRFUWxGT1JFRnpURVJDYTFORmR6aFZTRkp2Wmtob01HRklRbmRuU2tNMGJrbERTWE5KZUhkalMwUmpjRXhFUVhoT1JGRXdTSGxqTlZCVVozbFFRelI2VGtSTUx6SjNRa1JCVVd0S1ExRjNURVJDWjA1RVVtZDVTVkozYUUxcVNYbE5ha2w1VFdwSmVVMXFTWGxOYWtsNVRXcEplVTFxU1hsTmFrbDVUV3BKZVUxcVNYbE5ha2w1VFdwSmVVMXFTWGxOYWtsNVRXcEplVTFxU1hsTmFrd3ZkMEZCVWtOQlFYbEJSRWxFUVZOSlFVRm9SVUpCZUVWQ0x6aFJRVWgzUVVGQlVWVkNRVkZGUWtGUlJVRkJRVUZCUVVGQlFVRkJSVU5CZDFGR1FtZGpTVU5SYjB3dk9GRkJkRkpCUVVGblJVUkJkMGxGUVhkVlJrSkJVVUZCUVVZNVFWRkpSRUZCVVZKQ1VrbG9UVlZGUjBVeFJtaENlVXA0UmtSTFFtdGhSVWxKTUV0NGQxSldVekJtUVd0Tk1rcDVaMmRyUzBab1kxbEhVbTlzU21samIwdFRiekJPVkZrelQwUnJObEV3VWtaU2EyUkpVMVZ3VkZaR1ZsZFdNV2hhVjIxT2ExcFhXbTVoUjJ4eFl6TlNNV1J1WkRSbFdIRkVhRWxYUjJnMGFVcHBjRXRVYkVwWFYydzFhVnB0Y1V0cWNFdFhiWEEyYVhCeGNrdDZkRXhYTW5RM2FUVjFjMHhFZUUxWVIzZzRha3A1ZEV4VU1VNVlWekU1YWxveWRVaHBOQ3RVYkRWMVptODJaWEo0T0haUU1EbG1Zak1yVUc0Mkx6aFJRVWgzUlVGQmQwVkNRVkZGUWtGUlJVSkJVVUZCUVVGQlFVRkJSVU5CZDFGR1FtZGpTVU5SYjB3dk9GRkJkRkpGUVVGblJVTkNRVkZFUWtGalJrSkJVVUZCVVVvelFVRkZRMEY0UlVWQ1UwVjRRbWhLUWxWUlpHaGpVazFwVFc5RlNVWkZTMUp2WWtoQ1ExTk5lbFYyUVZaWmJreFNRMmhaYTA1UFJXdzRVbU5aUjFKdmJVcDVaM0JMYWxVeVRucG5OVTlyVGtWU1ZWcElVMFZzUzFVeFVsWldiR1JaVjFad2FscEhWbTFhTW1od1lXNU9NR1JZV2pObFNHdzJaMjlQUldoWllVaHBTVzFMYTNCUFZXeGFZVmh0U20xaGIzRlBhM0JoWVc1eFMyMXhjM0pQTUhSaVlUTjFURzAyZDNOUVJYaGpZa2g1VFc1TE1IUlFWVEZrWWxneVRtNWhOSFZRYXpWbFltNDJUMjV4T0haUU1EbG1Zak1yVUc0Mkx6bHZRVVJCVFVKQlFVbFNRWGhGUVZCM1JETXJka2hRUlU0eGNURnVOR3d4WlVaMlJqZzVia0pDVDIwemVrSk1kQzlsY1ZoV1ZrTmlkV2Q1VDJOa1N6bHFjbmQyTkdrdk9HcEdjak12V0hwaFpqaEJiMmh4TnpoMVdFNVZZV1ppT1ZWalIxbFFiSEJ3Y25ZcmFraFhkQzl4YkRka2R6SjBkalF2VEhwNmVVeElSM1ZNYTFwYWFtZEVTbFJJVlRGSE1uRmhja1Z6WmpKcWVESTRSV3A0U2t3MVltbGpjMjlrVVhkNmRGVnFUME5QYUU1WldHaGxNMjR2TkZOVVVuSnVlVnBRU1VkdmQxSXJZblJQTTJSMlFqSTFObHA0ZW1sdFlURmlWSGxZU1c1VFIxSnZXWEpQTUVWcmFYRlRjVnBuYW5ock9VSnRkbGc1YkVodU5XWXdXQ3RTTlZoMFdtTnVUaXR5TDBGTmVuQnlZVGt4YlRkdWRGVjBMMGN3T1hkek1UTkVZVTFaVWs1dFRYbEZORXBFYUdOcU5WUXdUbVUwVmpnNEswVm1PRUZxTlhNdkszY3hXV1o2YkhJMlIzSjVPSGhwYjNsVlZpdHViREpRVkhrMldFNUdlVmxWVlZWV05YQTJTVlkwV0RoU1pqaEJhMWwwWlM5M1EzWnRNQzg1UlU1WWRXeGxTMlZQU1RKaWVHaHlUVlV5YkZnNU1VUk9TbUo1U1RsMU1ucENWMGhJVlc5M1VETjJNSEl3VFhSa2NYSTVVREZTZDFwcGNqQnNOaTl2ZW01bVF6SndXR2syZW5CSGJVTmthRnBPY1d4MlQxbDFUVVozZDBkbVdIQXZWREJ3YlhJMmJtVjNTeXR1VWxoRWNtRllUbkphZEV4RlQycEdXVWw1VURncmR6bENWbTVVTVdjd04xVnlWeXRwT0U4MmR6QnNkRTFyZVhFeGQwMUZjVkZSUkNzMU5tTldTRTVGYkRKWmNFeHVVVTVYVFhsM2VGSk5XVFYwY1c1WmFYQnJRWGhJUjFGMmNXRTVhbFF5Yms1aVZEVmlibXRoT0c1TVpsZzFOMFYyYUVndlFVa3JZbEF2YzA1WFNEZzFZU3RvY1RoRk1FZEplRFoyY0d4MFltRk9jVlZEZEhGc2NrNUtURThyT0VGSmVFaGhUbU5tWmtwNmJuUllkbVJsVkcxaWRrNU5PVlJNVm1GRVVWVlZWVlkxY0RaUlZqUmlOQ3RwTUhoMlNERXJXamQ1TjFNMFNtbDVhVmRoVTB4dWVUQjRlVnBDYm5ReFJtVTFWalE1TkROb09GRk9OSGQyZWxrMlJqbHhkR28xWlhsaUszbFZiVE5tZFRGNk9EVlJhemcxU0ZocVIwczNPSFZrY1hJeGRIQXZhMk5QV1VzNVNtRllNUzkzUVhwc1RtRjBkRTVVVjNKNFlqSTFkVGRsTlVWd1JXdE5UMjVTUzJsSU1FRlhZa2RMY1RJNWRtOTZXRTFSYW5ZM09UVkRORU54TW01NGEwVTFORUpDYlhnclpHUlNjRE5vZG5ocWNWVlNiRmhTWkU1ME1EVjRPWEF3S3pOcVNrazNZbE50WmpCNFZEVjJRek5xVTBONlRuY3lhVFpYZUZoS1lVcE1UekZhZDBJemQwWTFLMmQ1Wm1GMlZsWmhTemt6YmxnemNpOUpPSFF3Vnk5bE5VZzVlaTk2VFN0NWREbFBhaXRKUm05S2NtazJhWFpHTVU5UVpFRnNha2RyWVhZMVp5dFZZbHBUUVUwNFkxb3ZSM1psTmpoT01FZEllRXRRUlZkdFIyWjNOelZWU1hVMGRrMXJMM05hUlRKTWRrZFVkVGh6WW1ORWRtNXBkbU54T0hwTlJ5dGhUak5tVVRsTVREQjFWMVpzWWxWTFMwdExPRFE1UVV0TFMwdEJRMmxwYVdkQmIyOXZiMEZMUzB0TFFWQXZPV3M5

结果：

ZGF0YTppbWFnZS87YmFzZTY0LC85ai80QUFRU2taSlJnQUJBZ0FBQVFBQkFBRC8yd0JEQUFnR0JnY0dCUWdIQndjSkNRZ0tEQlFOREFzTERCa1NFdzhVSFJvZkhoMGFIQndnSkM0bklDSXNJeHdjS0RjcExEQXhORFEwSHljNVBUZ3lQQzR6TkRMLzJ3QkRBUWtKQ1F3TERCZ05EUmd5SVJ3aE1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakwvd0FBUkNBQXlBRElEQVNJQUFoRUJBeEVCLzhRQUh3QUFBUVVCQVFFQkFRRUFBQUFBQUFBQUFBRUNBd1FGQmdjSUNRb0wvOFFBdFJBQUFnRURBd0lFQXdVRkJBUUFBQUY5QVFJREFBUVJCUkloTVVFR0UxRmhCeUp4RkRLQmthRUlJMEt4d1JWUzBmQWtNMkp5Z2drS0ZoY1lHUm9sSmljb0tTbzBOVFkzT0RrNlEwUkZSa2RJU1VwVFZGVldWMWhaV21Oa1pXWm5hR2xxYzNSMWRuZDRlWHFEaElXR2g0aUppcEtUbEpXV2w1aVptcUtqcEtXbXA2aXBxckt6dExXMnQ3aTV1c0xEeE1YR3g4akp5dExUMU5YVzE5aloydUhpNCtUbDV1Zm82ZXJ4OHZQMDlmYjMrUG42LzhRQUh3RUFBd0VCQVFFQkFRRUJBUUFBQUFBQUFBRUNBd1FGQmdjSUNRb0wvOFFBdFJFQUFnRUNCQVFEQkFjRkJBUUFBUUozQUFFQ0F4RUVCU0V4QmhKQlVRZGhjUk1pTW9FSUZFS1JvYkhCQ1NNelV2QVZZbkxSQ2hZa05PRWw4UmNZR1JvbUp5Z3BLalUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2Z29PRWhZYUhpSW1La3BPVWxaYVhtSm1hb3FPa3BhYW5xS21xc3JPMHRiYTN1TG02d3NQRXhjYkh5TW5LMHRQVTFkYlgyTm5hNHVQazVlYm42T25xOHZQMDlmYjMrUG42LzlvQURBTUJBQUlSQXhFQVB3RDMrdkhQRU4xcTFuNGwxZUZ2Rjg5bkJCT20zekJMdC9lcVhWVkNidWd5T2NkSzlqcnd2NGkvOGpGcjMvWHphZjhBb2hxNzh1WE5VYWZiOVVjR1lQbHBwcnYrakhXdC9xbDdkdzJ0djQvTHp6eUxIR3VMa1paamdESlRIVTFHMnFhckVzZjJqeDI4RWp4Skw1Ymljc29kUXd6dFVqT0NPaE5ZWGhlM24vNFNUUnJueVpQSUdvd1IrYnRPM2R2QjI1Nlp4emltYTFiVHlYSW5TR1JvWXJPMEVraXFTcVpnanhrOUJtdlg5bEhuNWYwWCtSNVh0WmNuTityL0FNenByYTkxbTdudFV0L0cwOXdzMTNEYU1ZUk5tTXlFNEpEaGNqNVQwTmU0Vjg4K0VmOEFqNXMvK3cxWWZ6bHI2R3J5OHhpb3lVVitubDJQVHk2WE5GeVlVVVVWNXA2SVY0WDhSZjhBa1l0ZS93Q3ZtMC85RU5YdWxlS2VPSTJieGhyTVUybFg5MUROSmJ5STl1MnpCV0hIVW93UDN2MHIwTXRkcXI5UDFSd1ppcjBsNi9vem5mQzJwWGk2enBHbUNkaFpOcWx2T1l1TUZ3d0dmWHAvVDBwbXI2bmV3SytuUlhEcmFYTnJadExFT2pGWUl5UDgrdzlCVm5UMWcwN1VyVytpOE82dzBsdE1reXExd01FcVFRRCs1NmNWSE5FbDJZcExuUU5XTXl3eFJNWTV0cW5ZaXBrQXhIR1F2cWE5alQybk5iVDVibmthOG5MZlg1N0V2aEgvQUkrYlAvc05XSDg1YStocThFMEdJeDZ2cGx0YmFOcVVDdHFsck5KTE8rOEFJeEhhTmNmZkp6bnRYdmRlVG1idk5NOVRMVmFEUVVVVVY1cDZRVjRiNCtpMHh2SDErWjd5N1M0Sml5aVdhU0xueTB4eVpCbnQxRmU1VjQ5NDNoOFFONHd2elk2RjlxdGo1ZXliK3lVbTNmdTF6ODVRazg1SFhqR0s3OHVkcXIxdHAva2NPWUs5SmFYMS93QXpsTmF0dE5UV3J4YjI1dTdlNUVwRWtNT25SS2lIMEFXYkdLcTI5dm96WE1RanY3OTVDNENxMm54a0U1NEJCbXgrZGRScDNodnhqcVVSbFhSZE50MDV4OXAwKzNqSkk3YlNtZjB4VDV2QzNqU0N6TncyaTZXeFhKYUpMTzFad0Izd0Y1K2d5ZmF2VlZhSzkzblgzci9JOHQwVy9lNUg5ei96TSt5dDlPaitJRm9Kcmk2aXZGMU9QZEFsakdrYXY1ZytVYlpTQU04Y1ovR3ZlNjhOMEdIeEtQRVdtR2Z3NzVVSXU0dk1rL3NaRTJMdkdUdThzYmNEdm5pdmNxOHpNRythTjNmUTlMTDB1V1ZsYlVLS0tLODQ5QUtLS0tBQ2lpaWdBb29vb0FLS0tLQVAvOWs9

Answer 1

我看到你编码错误的方式。 你应该使用Base64.getEncoder().encodeToString()

例子：

用 Java 编码

import java.nio.charset.StandardCharsets;
import java.util.*;

String myName = "roger";

String encodeString = Base64.getEncoder().encodeToString(myName.getBytes(StandardCharsets.UTF_8));
// output: cm9nZXI=

在JS中解码：

atob(encodeString); 
// atob("cm9nZXI=") -> output: "roger"