javascript - 在 react js中获取文件类型

Question

在 react

const allInputs = { imgUrl: '' };
const [imageAsFile, setImageAsFile] = useState('');
const [imageAsUrl, setImageAsUrl] = useState(allInputs);
const [media, setMedia] = useState(null);

const handleImageAsFile = (e) => {
    const image = e.target.files[0]
    setImageAsFile(imageFile => (image));
    console.log(imageAsFile);

}

这是输入代码，当我单击此按钮时，会显示所有类型的文件，但我希望能够将它所在的文件类型存储在变量 中

<input type="text"
    id="phone"
    onChange={(e) => setPhone(e.target.value)}
/>

例如，如果我选择一个图像，如何知道我选择的图像类型？如果它是 png 或 jpg 或其他任何内容，然后将其上传到数据库。

Answer 1

首先，React Javascript 的工作方式与 Javascript 在任何地方的工作方式完全相同，为了访问图像类型，请参阅下面的代码，我添加了注释以便更好地理解。

const [imageAsFile, setImageAsFile] = useState('');
    const [imageAsUrl, setImageAsUrl] = useState(allInputs);
    const [media, setMedia] = useState(null);

 const handleImageAsFile = (e) => {
     //image var holds the file object which has a type property 
      const image = e.target.files[0];          
      console.log(image.type); // this will output the mime, i.e "image/png" or "image/jpg"
      setImageAsFile(imageFile => (image));
     console.log(imageAsFile);

  }