Javascript 获取输入类型=文件值

我有这个元素：

上传

在函数handleFileChange中：

const handleFileChange=event=>{
让输入=event.target.files[0]；
如果（！输入）返回；
let data=new FormData（）；
data.append（“fileToUpload”，输入）；
setFile（数据）；
};

在函数handleMessageChange中：

const handleMessageChange=event=>{
setMessage（event.target.value）
};

使用setFile和setMessage是react的setState钩子，这些状态用作调用API的有效负载：

const [file, setFile] = useState()
const [message, setMessage] = useState()

问题是：我想在一个API调用中发送文件数据和消息，因此我尝试了两种方法：

在func上传数据中设置新表单数据

consthandleclick=async（）=>{
let data=new FormData
data.append（“file”，file）//希望将文件状态传递到此处，但不起作用
data.append（“消息，消息”）
//使用有效负载=数据调用API。。。
}

获取func上传数据中2个输入的值：

consthandleclick=async（）=>{
让inputFile=document.getElementById（“新文件”）；
让inputMessage=document.getElementById（“newMessage”）；
let data=new FormData（）；
data.append（“file”，inputFile.value）；//仅获取文件路径（C://fakepath/…），而不是文件数据
data.append（“message”，inputMessage.value）；
//使用有效负载=数据调用API。。。
};

---

这两种方法都不起作用。你能帮我吗？谢谢！

我将以一般方式回答你的问题，这样任何想使用它的人都可以继续。html5中有一种叫做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);
}

---

我将以一种一般的方式回答你的问题，这样任何想使用它的人都可以继续。html5中有一种叫做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);
}

---

我不是百分之百确定，但这一个希望它会起作用。 使用

inputFile.files[0]

consthandleclick=async（）=>{
让inputFile=document.getElementById（“新文件”）；
让inputMessage=document.getElementById（“newMessage”）；
let data=new FormData（）；
data.append（“file”，inputFile.files[0]）；//我不是100%确定，但这一个希望它能工作。
使用
inputFile.files[0]


consthandleclick=async（）=>{
让inputFile=document.getElementById（“新文件”）；
让inputMessage=document.getElementById（“newMessage”）；
let data=new FormData（）；
data.append（“文件”，inputFile.files[0]）；//我如何在我的案例中使用您的答案？这可能有助于您创建新的FileReader实例并在FileReader实例中将文件作为参数传递我如何在我的案例中使用您的答案？这可能有助于您创建新的FileReader实例并在FileReader实例中将文件作为参数传递