第一,使用原生input的type=”file”
<input type="file" name="file" onChange={this.onChange} style={{display:'none'}} ref={this.inputRef}/>
第二, 用它的onChange方法获得file
onChange(e){
const file = e.target.files[0]
if(file) dispatch({ type:'upload', file })
e.target.value = '' // 上传之后还原
}
第三,样式调整
为了不使用简陋的原生html上传按钮,
用style={{display:’none’}}隐藏原生input,
然后再自己写一个美丽的上传按钮,它onClick的时候,
调用原生input的引用,手动触发click,
像这样:
this.inputRef.click()
就相当于点击了原生按钮
第四,设置好body
用上刚才的file变量,
创建一个FormData,
append上去, 这里的formData就是fetch的body
const formData = new FormData()
formData.append('file', file)
最后 执行fetch
记得改content-type
"Content-Type": "multipart/form-data",
fetch(url,{
method :"POST",
body: formData,
headers:{
"Content-Type": "multipart/form-data"
}
})