获得输入的type=file值
获得输入的type=file值
提问于 2020-07-04 12:26:18
我有这样的元素：
<input type="file" id="newFile" onChange={handleFileChange} />
<input type="text" id="newMessage" onChange={handleMessageChange} />
<button onClick={uploadData}>Upload</button>在函数handleFileChange中：
const handleFileChange = event => {
let input = event.target.files[0];
if (!input) return;
let data = new FormData();
data.append("fileToUpload", input);
setFile(data);
};在函数handleMessageChange中：
const handleMessageChange= event => {
setMessage(event.target.value)
};对于、setFile、和，setMessage是react的setState挂钩，这些状态被用作调用API的有效负载：
const [file, setFile] = useState()
const [message, setMessage] = useState()问题是:我想在一个API调用中同时发送文件数据和message，所以我尝试了两种方法：
- 在func uploadData :
中设置新的FormData
const handleClick = async () => {
let data = new FormData
data.append("file", file) // expect to pass the file state to here but it not works
data.append("message, message)
// Call API with payload = data...
}- 在func uploadData :
中获得2个输入的值。
const handleClick = async () => {
let inputFile = document.getElementById("newFile");
let inputMessage = document.getElementById("newMessage");
let data = new FormData();
data.append("file", inputFile.value); // only got the file path (C://fakepath/....), not the file data
data.append("message", inputMessage.value);
// Call API with payload = data...
};这两种方法都不起作用。你能帮帮我吗?谢谢!
回答 2
Stack Overflow用户
发布于 2020-07-04 12:46:38
我会以一般的方式回答你的问题，这样任何想用它的人都可以继续。在FileReader中有一种叫做FileReader的东西。您必须使用FileReader API。
function readImage(file) {
// Check if the file is an image.
if (file.type && file.type.indexOf('image') === -1) {
console.log('File is not an image.', file.type, file);
return;
}
const reader = new FileReader();
reader.addEventListener('load', (event) => {
img.src = event.target.result;
});
reader.readAsDataURL(file);
}Stack Overflow用户
发布于 2020-07-04 12:56:15
我不是百分之百肯定，但这个人希望它能起作用。用.value更改inputFile.files[0]
const handleClick = async () => {
let inputFile = document.getElementById("newFile");
let inputMessage = document.getElementById("newMessage");
let data = new FormData();
data.append("file", inputFile.files[0]); //<-- CHANGED .value to .files[0]
data.append("message", inputMessage.value);
// Call API with payload = data...
};<input type="file" id="newFile" onChange={handleFileChange} />
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62729099
复制相关文章
相似问题
腾讯云开发者
