我有一个文件输入，该文件输入向我返回看起来像文件路径的文件，但是fileReader给我以下错误。
Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
我觉得我在这里缺少什么。我要去哪里错了？
import React from 'react';
export default class TestPage extends React.Component {
constructor() {
super();
this.state = {
file: ''
}
}
onChange(e) {
let reader = new FileReader();
reader.onload = function(e) {
this.setState({file: reader.result})
}
reader.readAsDataURL(e.target.value);
}
render() {
return (
<div>
<input onChange={this.onChange.bind(this)} type="file" name="file" />
<br />
<video width="400" controls>
<source src={this.state.file} type="video/mp4" />
</video>
</div>
)
}
}
答案很明显，就在错误中。“参数1的类型不是Blob”-换句话说，readAsDataURL需要一个Blob，但这不是您要传递的Blob。readAsDataURL专门用于读取文件或Blob，而不是文件路径。同时，该FileReader.result参数最终将是String或ArrayBuffer。
您可能想要做的是将输入文件数组而不是“ e.target.value”传递给readAsDataURL。
onChange(e) {
let reader = new FileReader();
reader.onload = function(e) {
this.setState({file: reader.result})
}
reader.readAsDataURL(e.target.files[0]);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句