fileInput功能在react js中不起作用

Question

我想在我的react js应用程序中使用fileInput，但我正在获得' fileInput '未定义错误。有什么办法能让它工作吗?

let data = new FormData();
data.append("", fileInput.files[0], "/C:/Users/hp/Downloads/IMG_0733.jpg");

我尝试寻找一个名为fileInput的包，但找不到。

这里是完整的代码

mport React, { Component } from 'react';
import axios from 'axios';
import * as os from 'os';
import { useState } from 'react';


function  App  () {

const api = 'https://XXX.execute-api.us-east-1.amazonaws.com/prod/myarrowbucket/IMG.JPG';
// const [data,setData] = useState()
let data = new FormData();
data.append("", fileInput.files[0], "/C:/Users/hp/Downloads/IMG_0733.jpg");

let config = {
method: 'put',
url: 'https://XXXX.execute-api.us-east-1.amazonaws.com/prod/XX/IMG_0733.jpg',
headers: { 
'Content-Type': 'image/jpeg', 
...data.getHeaders()
},
data : data
};

axios(config)
.then((response) => {
console.log(JSON.stringify(response.data));
})
.catch((error) => {
console.log(error);
});

return (
<div>Medium Tutorial
<form>
{/* <input type="file" onChange={(e) => setItem(e)}/> */}

</form>

</div>
);
}
export default App;

Answer 1

你得到一个错误，因为'fileinput'没有定义，这意味着它不存在，而你正在试图访问它。

您必须创建一个状态来存储来自输入的文件，并将其作为引用传递给data.append()。

//create a state to hold the files
const [item, setItem] = useState();
//passing only the first file from the state
data.append("name", item.files[0]);
//updating the files in state
<input type="file" onChange={(e) => setItem(e)}/>