React中上传文件
2021-05-11 21:41:59
React中上传文件，如果后端API要求格式为`multipart/form-data`，则使用下面的方式上传
```
import React, {useEffect, useState} from 'react';
import axios from "axios"
function UploadDemo(props) {
const [fileData, setFileData] = useState(null)
return (
<div>
<input type="file" accept="image/*" onChange={(e) => { // 不能用onInput，否则ios上无效,不加accept低版本android可能有兼容问题
setFileData(e.target.files[0])
}}/>
<input type="button" onClick={() => {
let formData = new FormData()
formData.append('file', fileData); // 第一个参数file，由API决定
axios({
method: 'POST',
url: 'http://www.example.com/api/upload/avatar',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
},
timeout: 20000
}).then((res) => {
console.log(res)
})
}}/>
</div>
);
}
export default UploadDemo
```