Объясните пожалуйста простым языком что делает readAsDataURL у FileReader

Question

Пример кода, где он используется:

onAttachmentChange (e) {
                var app = this;
                
                var arrfiles = [];
                for(var i = 0; i < e.target.files.length; i++) {
                    arrfiles[i] = e.target.files[i];
                    
                    var reader = new FileReader();
                    reader.onload = (e) => {
                        app.imagesData.push(e.target.result);
                    }
                    reader.readAsDataURL(e.target.files[i]);                    
                }
                
                app.files = app.files.concat(arrfiles);
            }

Это обработчик инпута для выбора файлов

Answer 1

readAsDataURL считывает файл и передает его содержимое как base64 строку

onAttachmentChange (e) {
    var app = this;
    
    var arrfiles = [];
    for(var i = 0; i < e.target.files.length; i++) {
        arrfiles[i] = e.target.files[i];
        var reader = new FileReader();
         
        reader.onload = (e) => {
            // Передает его содержимое (e.target.result) в массив imagesData
            app.imagesData.push(e.target.result);
        }
        // Считывает файл
        reader.readAsDataURL(e.target.files[i]);                    
    }
    
    app.files = app.files.concat(arrfiles);
}

Answer 2

на выходе будет подобная трока строка

"data:image/svg+xml;base64,PD94bWwgdm...."

можно использовать как ссылку, например так

js window . open ('data:text/html;charset=utf-8,...')

css div { background-image : url(data:image/jpeg;base64,...);}

html <img src="data:image/svg+xml;base64,.../>"

БЛОГ НА HUSL

Объясните пожалуйста простым языком что делает readAsDataURL у FileReader

Ответы (2 шт):