Временной источник доступа 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=="> 

Итак, где имя файла хранится, а в качестве источника используется временного плагин.
Теперь вот мой вопрос: как я могу получить доступ к файловому источнику так же, как я могу получить доступ к имени файла? Цель состоит в том, чтобы использовать источник для заполнения второй таблицы (я использую angularJS). Я попробовал несколько способов получить атрибут source, но я продолжаю возвращаться undefined.
I.e.

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

не работает.
Любая помощь будет принята с благодарностью. Благодарю.

Answer 1

src на самом деле является URI данных, они позволяют нам встраивать небольшие файлы, встроенные в документы. Формат таков, что все данные изображения внутри URL-адреса, поэтому нет временного файла. Вы можете использовать этот источник, если хотите, чтобы использовать обычный файл uri.

Для получения дополнительной информации вы можете проверить data uri MDN

Answer 2

Путь доступа к ней, чтобы найти изображение по значению тега альт, который в этом случае будет имя файла. Вот функция, возвращающая значение 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 
     }