时间戳

首页 > 解决方案 > 无法访问我在 html img 标签中上传的 base64 图像

javascript - 无法访问我在 html img 标签中上传的 base64 图像

问题描述

我使用下面的代码将图像上传为 base64

document.getElementById('button').addEventListener('click', function() {
  var files = document.getElementById('file').files;
alert('ok');
  if (files.length > 0) {


  var reader = new FileReader();
   //reader.readAsDataURL(file);
reader.readAsDataURL(files[0]);
   reader.onload = function () {
     console.log(reader.result);
var data = reader.result;
         //var b64=   base64 = data.replace(/^[^,]*,/, '');

   };
   reader.onerror = function (error) {
     console.log('Error: ', error);
   }


  }
});

这是上传文件的示例

data:image/jpeg;base64,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ZXR0aW5ncy8xLjAvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6eGFwUmlnaHRzPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvcmlnaHRzLyIKICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgdGlmZjphcnRpc3Q9IkRhdmlkIE5hZGFsaW4iCiAgIHRpZmY6T3JpZW50YXRpb249IjEiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAyNCIKICAgdGlmZjpJbWFnZUxlbmd0aD0iNzY4IgogICB0aWZmOlBob3RvbWV0cmljSW50ZXJwcmV0YXRpb249IjIiCiAgIHRpZmY6U2FtcGxlc1BlclBpeGVsPSIzIgogICB0aWZmOlhSZXNvbHV0aW9uPSI5Ni8xIgogICB0aWZmOllSZXNvbHV0aW9uPSI5Ni8xIgogICB0aWZmOlJlc29sdXRpb25Vbml0PSIyIgogICB4YXA6UmF0aW5nPSI0IgogICB4YXA6Q3JlYXRlRGF0ZT0iMjAwOC0wMi0wN1QxOTozMzoxMS4wMjBaIgogICB4YXA6TW9kaWZ5RGF0ZT0iMjAwOC0wMi0wN1QxMTozMzoxMS4wMi0wODowMCIKICAgeGFwOk1ldGFkYXRhRGF0ZT0iMjAwOS0wMi0wMlQxMTo0MToxNy0wODowMCIKICAgTWljcm9zb2Z0UGhvdG9fMV86UmF0aW5nPSI2MyIKICAgeGFwTU06SW5zdGFuY2VJRD0idXVpZDpmYWY1YmRkNS1iYTNkLTExZGEtYWQzMS1kMzNkNzUxODJmMWIiCiAgIGV4aWY6RXhpZlZlcnNpb249IjAyMjEiCiAgIGV4aWY6RGF0ZVRpbWVPcmlnaW5hbD0iMjAwOC0wMi0wN1QxMTozMzoxMS4wMi0wODowMCIKICAgZXhpZjpEYXRlVGltZURpZ2l0aXplZD0iMjAwOC0wMi0wN1QxMTozMzoxMS4wMi0wODowMCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwMjQiCiAgIGV4aWY6UGl4ZWxZRGltZW5zaW9uPSI3NjgiCiAgIGV4aWY6Q29sb3JTcGFjZT0iNjU1MzUiCiAgIGNyczpBbHJlYWR5QXBwbGllZD0iVHJ1ZSIKICAgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIKICAgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9IiIKICAgcGhvdG9zaG9wOkxlZ2FjeUlQVENEaWdlc3Q9IjUwQkI2MDMwMzY0RkJERkIxODQyRTk4REUwRTgxRUZFIgogICB4YXBSaWdodHM6TWFya2VkPSJUcnVlIj4KICAgPHRpZmY6Qml0c1BlclNhbXBsZT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGk+ODwvcmRmOmxpPgogICAgIDxyZGY6bGk+ODwvcmRmOmxpPgogICAgIDxyZGY6bGk+ODwvcmRmOmxpPgogICAgPC9yZGY6U2VxPgogICA8L3RpZmY6Qml0c1BlclNhbXBsZT4KICAgPGRjOmNyZWF0b3I+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpPkRhdmlkIE5hZGFsaW48L3JkZjpsaT4KICAgIDwvcmRmOlNlcT4KICAgPC9kYzpjcmVhdG9yPgogICA8ZGM6cmlnaHRzPgogICAgPHJkZjpBbHQ+CiAgICAgPHJkZjpsaSB4bWw6bGFuZz0ieC1kZWZhdWx0Ij7CqSBNaWNyb3NvZnQgQ29ycG9yYXRpb248L3JkZjpsaT4KICAgIDwvcmRmOkFsdD4KICAgPC9kYzpyaWdodHM+CiAgPC9yZGY6RGVzY3JpcHRpb24+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgI

这是我的问题：当我将 base64 字符串传递给图像标签时，它没有显示任何图像，如下所示

<img  width="50px" height="50px" src="
data:image/jpeg;base64,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ZXR0aW5ncy8xLjAvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6eGFwUmlnaHRzPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvcmlnaHRzLyIKICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgdGlmZjphcnRpc3Q9IkRhdmlkIE5hZGFsaW4iCiAgIHRpZmY6T3JpZW50YXRpb249IjEiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAyNCIKICAgdGlmZjpJbWFnZUxlbmd0aD0iNzY4IgogICB0aWZmOlBob3RvbWV0cmljSW50ZXJwcmV0YXRpb249IjIiCiAgIHRpZmY6U2FtcGxlc1BlclBpeGVsPSIzIgogICB0aWZmOlhSZXNvbHV0aW9uPSI5Ni8xIgogICB0aWZmOllSZXNvbHV0aW9uPSI5Ni8xIgogICB0aWZmOlJlc29sdXRpb25Vbml0PSIyIgogICB4YXA6UmF0aW5nPSI0IgogICB4YXA6Q3JlYXRlRGF0ZT0iMjAwOC0wMi0wN1QxOTozMzoxMS4wMjBaIgogICB4YXA6TW9kaWZ5RGF0ZT0iMjAwOC0wMi0wN1QxMTozMzoxMS4wMi0wODowMCIKICAgeGFwOk1ldGFkYXRhRGF0ZT0iMjAwOS0wMi0wMlQxMTo0MToxNy0wODowMCIKICAgTWljcm9zb2Z0UGhvdG9fMV86UmF0aW5nPSI2MyIKICAgeGFwTU06SW5zdGFuY2VJRD0idXVpZDpmYWY1YmRkNS1iYTNkLTExZGEtYWQzMS1kMzNkNzUxODJmMWIiCiAgIGV4aWY6RXhpZlZlcnNpb249IjAyMjEiCiAgIGV4aWY6RGF0ZVRpbWVPcmlnaW5hbD0iMjAwOC0wMi0wN1QxMTozMzoxMS4wMi0wODowMCIKICAgZXhpZjpEYXRlVGltZURpZ2l0aXplZD0iMjAwOC0wMi0wN1QxMTozMzoxMS4wMi0wODowMCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwMjQiCiAgIGV4aWY6UGl4ZWxZRGltZW5zaW9uPSI3NjgiCiAgIGV4aWY6Q29sb3JTcGFjZT0iNjU1MzUiCiAgIGNyczpBbHJlYWR5QXBwbGllZD0iVHJ1ZSIKICAgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIKICAgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9IiIKICAgcGhvdG9zaG9wOkxlZ2FjeUlQVENEaWdlc3Q9IjUwQkI2MDMwMzY0RkJERkIxODQyRTk4REUwRTgxRUZFIgogICB4YXBSaWdodHM6TWFya2VkPSJUcnVlIj4KICAgPHRpZmY6Qml0c1BlclNhbXBsZT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGk+ODwvcmRmOmxpPgogICAgIDxyZGY6bGk+ODwvcmRmOmxpPgogICAgIDxyZGY6bGk+ODwvcmRmOmxpPgogICAgPC9yZGY6U2VxPgogICA8L3RpZmY6Qml0c1BlclNhbXBsZT4KICAgPGRjOmNyZWF0b3I+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpPkRhdmlkIE5hZGFsaW48L3JkZjpsaT4KICAgIDwvcmRmOlNlcT4KICAgPC9kYzpjcmVhdG9yPgogICA8ZGM6cmlnaHRzPgogICAgPHJkZjpBbHQ+CiAgICAgPHJkZjpsaSB4bWw6bGFuZz0ieC1kZWZhdWx0Ij7CqSBNaWNyb3NvZnQgQ29ycG9yYXRpb248L3JkZjpsaT4KICAgIDwvcmRmOkFsdD4KICAgPC9kYzpyaWdodHM+CiAgPC9yZGY6RGVzY3JpcHRpb24+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgI
">

标签： javascript

解决方案

您需要将其设置为src图像的，如下所示：

document.getElementById('button').addEventListener('click', function() {
     var files = document.getElementById('file').files;
     if (files.length > 0) {
          var reader = new FileReader();
          reader.readAsDataURL(files[0]);
          reader.onload = function () {
               var data = reader.result;
               document.getElementById("img").src=data;
         };
         reader.onerror = function (error) {
              console.log('Error: ', error);
         }
     }
});
<input type="file" id="file"/>
<button id="button">Click</button>

<img src="" id="img" width="50px" height="50px"/>

推荐阅读