我正在构建一个具有文件输入字段并通过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
元素。当前在我的控制台中,出现以下错误:
无法在'FileReader'上执行'readAsDataURL':参数1不是'Blob'类型
帮我执行。谢谢
答案 0 :(得分:2)
更改为reader.readAsDataURL(event.target.files[0])
以下帖子可能会有所帮助https://alligator.io/vuejs/file-reader-component/
答案 1 :(得分: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])
}