Vuetify v-file-input набор файлов в javascript vue

Question

Следующий сценарий:

Пользователь заполняет форму, которая включает v-file-input. Вложенные файлы также отправляются на сервер и сохраняются там. Пользователь имеет возможность edit формы. Все поля формы заполнены сохраненными данными. Как я могу динамически заполнить поле v-file-input сохраненными файлами?

Answer 1

Таким образом, ваш сервер должен будет конвертировать ваши файлы в base64 для этого решения. Примечание. Клиент = приложение Vue.

1. Клиент запрашивает данные файла в формате base64 с сервера (конечная точка RESTful или другие средства по вашему выбору). Это должно быть сделано в хуке created и назначено свойству данных (я буду использовать myFileBase64 в качестве примера).

2. Клиент имеет вычисляемое свойство myFileAsFile которая вызывает приведенную ниже функцию ( credit ) для преобразования myFileBase64 из base64 в тип File:

 function dataURLtoFile(dataurl, filename) {

        var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), 
            n = bstr.length, 
            u8arr = new Uint8Array(n);

        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }

        return new File([u8arr], filename, {type:mime});
    }

    //Usage example:
    var file = dataURLtoFile('data:text/plain;base64,aGVsbG8gd29ybGQ=','hello.txt');
    console.log(file);

Клиент устанавливает значение v-input в myFileAsFile. Это можно сделать с помощью v-bind:value

Вот кодекс, демонстрирующий часть задания моего ответа: https://codepen.io/Qumez/pen/OJVxvYY