将文件转换为 base64 并在 Vuejs 中添加 v-model 绑定

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-model 中有值，但我得到了文件的路径，但我需要有一个 base64 元素。目前在我的控制台中出现以下错误：

Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'

帮我执行。谢谢

Answer 1

你应该设置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])
    }
}

Answer 2

改为reader.readAsDataURL(event.target.files[0])

关注 post 可能会有帮助 https://alligator.io/vuejs/file-reader-component/

将文件转换为 base64 并在 Vuejs 中添加 v-model 绑定

Convert file to base64 and add v-model binding in Vuejs

javascript

vue.js

vue-component

vuejs2

v-model