AngularJS文件以拖放方式上载显示图像

每当有人使用鼠标将图像拖放到dropbox中时，我都会尝试使图像可见 我也看过，但没能让它工作

我尝试了各种方法，比如显示blob、显示文件，但在图像被放入该区域后，我无法显示图像

HTML:

更新2：

通过使用以下选项进行修复：

$scope.placeImage = function () {
        var ctx = document.getElementById('canvas').getContext('2d');
        var url = URL.createObjectURL($scope.files[0]);
        var img = new Image();
        img.onload = function() {
            ctx.drawImage(img, 20, 20);    
        }
        img.src = url;
}

---

文件不是HTML元素。您必须将该文件指定为img标记的src

$("<img />").attr("src", files[i]).appendTo(".dropper");

$（“
我认为上面这一行代码可以与angular的内置jQuery lite配合使用，但它可能需要jQuery。它至少可以让您了解需要做什么。
+1谢谢。不幸的是，如果我查看我的控制台，我仍然会出错。（请参阅更新的帖子）我不熟悉ng file drop指令，但它看起来像是在将文件数据包装到一个文件对象中，要在上传之前访问它，您必须根据上面链接的答案使用FileReader api。我设法修复了它（请参阅更新2）.虽然我并不完全使用您上述的方式，但我感谢您的回答和推荐，我认为这比我的方式更好&稍后会看一看。
 $("<img />").attr("src", files[i]).appendTo(".dropper");

 $("<img />").attr("src", files[i].__proto__.__proto__).appendTo(".dropper");

  http://localhost:8080/project/[object%20Object] 404 (Not Found)

$scope.placeImage = function () {
        var ctx = document.getElementById('canvas').getContext('2d');
        var url = URL.createObjectURL($scope.files[0]);
        var img = new Image();
        img.onload = function() {
            ctx.drawImage(img, 20, 20);    
        }
        img.src = url;
}

$("<img />").attr("src", files[i]).appendTo(".dropper");