第一，使用原生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"
    } 
})