react 使用fetch 上傳檔案 寫法
阿新 • • 發佈:2018-11-11
第一,使用原生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"
}
})