访问 dropzoneJS 文件的临时源

Question

我在我的网站上使用 dropzone js，我想访问插件使用的拖放照片源。这就是我的意思：在 added file 事件侦听器中，我可以轻松访问已删除文件的名称，例如

dropzoneForm.on('addedfile', function(file){
      console.log(file.name);
    });

但是在 file 对象中环顾四周，我无法获取插件使用的图像源来提供预览。检查 DOM 树，我确实找到了 .dz-image 部分，预览中使用的图像来源：

 <div class="dz-image">
  <img data-dz-thumbnail="" 
    alt="Profilo-Facebook.jpg"
    src="data:image/png;base64,iVBORw0...anN6CQAAAABJRU5ErkJggg==">

因此，文件名以及插件使用的临时源存储在某处。
现在，这是我的问题：我怎样才能像访问文件名一样访问文件源？目的是使用源来填充第二个 table（我正在使用 angularJS）。我确实尝试了几种方法来获得 source 属性，但我一直在找回 undefined.
IE。

dropzoneForm.on('addedfile', function(file){
      console.log(file.source); // or src, or whatever
    });

无效。
任何帮助将不胜感激。谢谢。

Answer 1

src 实际上是一个数据 URI，它们允许我们在文档中嵌入小文件。格式是图像的所有数据都在URL以内，所以没有临时文件。如果您愿意，可以像使用普通文件 uri 一样使用此源。

更多信息你可以查看data uri MDN

Answer 2

访问它的方法是通过 alt 标签值查找图像，在本例中为文件名。这是return src 值的函数。在 dropzone 代码中成功后调用即可。它将为您获取 src 值。

 success: function (file, response) {
 setImageAfterUpload(file); }


function setImageAfterUpload(filename) {
    var imgSrcValue=  $('img[alt="'+ filename.name +'"]').first().prop('src'); //get the src value
 document.getElementById("displayImage").src = imgSrcValue; //set it to an existing img tag on the page
        }

访问 dropzoneJS 文件的临时源

Access dropzoneJS file's temporary source

javascript

jquery

dropzone.js