파일을 base64로 변환하고 Vuejs에서 v-model 바인딩 추가

파일을 base64로 변환하고 Vuejs에서 v-model 바인딩 추가

나는 파일 입력 필드가 있는 구성요소를 만들고 있고, 기능을 통해 렌더링되고 있다.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-model에서 값을 가질 때 파일의 경로를 얻지만base64요소. 현재 내 콘솔에서 다음 오류가 발생하는 경우:

'readAsData'를 실행하지 못함'FileReader'의 URL: 매개 변수 1이 'Blob' 유형이 아님

날 좀 도와줘.고마워요.

당신은 설정해야 한다.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])
    }
}

로 변경reader.readAsDataURL(event.target.files[0])

다음 게시물은 https://alligator.io/vuejs/file-reader-component/에 도움이 될 수 있다.

참조URL: https://stackoverflow.com/questions/53944112/convert-file-to-base64-and-add-v-model-binding-in-vuejs