Конвертируйте файл в base64 и добавьте поддержку v-модели в Vuejs

Question

Я создаю компонент, который имеет поля ввода файла и отображается с помощью функции в VueJs:

export default {
    name: 'nits-file-input',
    props: {
        label: String,
    },
    render (createElement) {
        return createElement('div', { class: 'form-group m-form__group'}, [
            createElement('label', this.label),
            createElement('div'),
            createElement('div', { class: 'custom-file'},[
                createElement('input', {
                    class: 'custom-file-input',
                    attrs: { type: 'file' },
                    domProps: {
                        value: self.value
                    },
                    on: {
                        input: (event) => {
                            var reader = new FileReader()
                            reader.readAsDataURL(event.target.value)
                            reader.onload = function () {
                                console.log(reader.result);
                            };
                            this.$emit('input', event.target.value)
                        }
                    }
                }),
                createElement('label', { class: 'custom-file-label'}, 'Choose File')
            ])
        ])
    }
}

Имея значения в v-модели, я получаю путь к файлу, но мне нужноиметь элемент base64.в настоящее время в моей консоли я получаю следующую ошибку:

Не удалось выполнить readAsDataURL для FileReader: параметр 1 не относится к типу Blob

Помогите мне в исполнении.Спасибо

Answer 1

Изменить на reader.readAsDataURL(event.target.files[0])

Следующий пост может быть полезным https://alligator.io/vuejs/file-reader-component/

Answer 2

Вы должны установить reader.readAsDataURL(event.target.files[0]) вместо reader.readAsDataURL(event.target.value):

on: {
 input: (event) => {
    var reader = new FileReader()
    reader.readAsDataURL(event.target.files[0])
    reader.onload = ()=> {
       console.log(reader.result);
                     };
    this.$emit('input', event.target.files[0])
     }