文件上传（预览图片不上传）

预览图片不上传

*构造函数
FileReader()
返回一个新构造的。FileReader
[，]
*
属性
FileReader.error 只读
[DOMException，]
FileReader.readyState 只读
表示状态的数字。取值如下:FileReader
常量名 值 描述
EMPTY 0 还没有加载任何数据.
LOADING 1 数据正在被加载.
DONE 2 已完成全部的读取请求.
FileReader.result 只读

文件的内容。该属性仅在读取操作完成后才有效,数据的格式取决于使用哪个方法来启动读取操作。

事件处理

FileReader.onabort
处理事件。该事件在读取操作被中断时触发。abort
FileReader.onerror
处理事件。该事件在读取操作发生错误时触发。error
FileReader.onload
处理事件。该事件在读取操作完成时触发。load
FileReader.onloadstart
处理事件。该事件在读取操作开始时触发。loadstart
FileReader.onloadend
处理事件。该事件在读取操作结束时(要么成功,要么失败)触发。loadend
FileReader.onprogress
处理事件。[Blob]progress

方法
FileReader.abort()
中止读取操作。在返回时,属性为。readyStateDONE
FileReader.readAsArrayBuffer()
[Blob]，结果 [数组缓冲区] 。
FileReader.readAsBinaryString()
[Blob]一旦完成,属性中将包含所读取文件的原始二进制数据。result
FileReader.readAsDataURL()
[Blob][Url64]resultdata:
FileReader.readAsText()
[Blob]一旦完成,属性中将包含一个字符串以表示所读取的文件内容。result

实例
function demo() {
let [ url, seturl ] = useState(’’)
let [ data, setdata ] = useState(’’)
const onClick = () => {
console.log(data)
}
const getImageUrl = evt => {
// 图片上传文件信息
// console.log(evt.target.files[0])
// 实例化一个 fileReader
var fr = new FileReader()
fr.onloadend = e => {
// console.log(e)
seturl(e.target.result)
}
fr.readAsDataURL(evt.target.files[0])
}
const onReadAsBinaryString = evt => {
// 必须重新 new 一个新实例
const fr = new FileReader()
// 该事件在读取操作结束时 （ 要么成功 要么失败 ） 触发
// console.log(fr)
fr.onloadend = e => {
setdata(e.target.result)
}
fr.readAsBinaryString(evt.target.files[0])
}
const onChange = evt => {
getImageUrl(evt)
onReadAsBinaryString(evt)
}
return (

<input type=“file” onChange = { onChange }/>

提交

)
}
export default demo