如何使用纯javascript读取图像文件？

我是 javascript 新手，目前我的一个项目遇到问题，其中包括从网站根文件夹查看图像。这是我当前的代码：

var reader = new FileReader();

    reader.onload = function(event){
           var dataUri = event.target.result,
               img = document.createElement("img");

               img.src =  dataUri;
               document.body.appendChild(img);
    };

    reader.onerror = function(event){
           console.log("File could not be read: " + event.target.error.code);
    };

reader.readAsDataURL("/uploads/extras/item_a/image1.png");

这是我的代码，它没有显示任何内容。在我的控制台中它给了我一个错误或Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

这是正确的方法

var openFile = function(file) {
  var input = file.target;
  var reader = new FileReader();
  reader.onload = function(){
    var dataURL = reader.result;
    var output = document.getElementById('output');
    output.src = dataURL;
  };
  reader.readAsDataURL(input.files[0]);
};

<input type='file' accept='image/*' onchange='openFile(event)'><br>
<img id='output' style="height:100px; width:100px;">

做一些调查以了解代码中的错误在哪里，这更好地学习

当您放弃时，请在这里发表评论，我很乐意再次提供帮助！ :)