react 使用fetch 上传文件 写法

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

来源：CSDN

作者：hao像飘在外太空

链接：https://blog.csdn.net/sinat_24070543/article/details/81024259