Получить тип файла в реакции js
В ответ
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.info(imageAsFile);
}
Вот код ввода, когда я нажимаю эту кнопку, отображаются все типы файлов, но я хочу иметь возможность сохранить тип файла в переменной
<input type = "text"
id = "phone"
onChange = {(e) => setPhone(e.target.value)}
/>
Например, если я выбираю изображение, как узнать тип выбранного изображения? Если это png или jpg или что-то еще, прежде чем загружать его в базу данных.
Javascript, используемый в реакции, отличается от того, который используется для обычных html, css и js.
есть ли ответ, который использует хуки в реакции
Это что-то вроде новой концепции, которую вы представили. Вы должны позволить javascript работать так, как он работает.
Нет смысла добавлять в код хуки для поиска типа изображения, это совершенно не нужно.
<input type = "file" id = "your-files" multiple> <script> var control = document.getElementById("your-files"); control.addEventListener("change", function(event) { // When the control has changed, there are new files var files = control.files, for (var i = 0; i < files.length; i++) { console.info("Filename: " + files[i].name); console.info("Type: " + files[i].type); console.info("Size: " + files[i].size + " bytes"); } }, false); </script> React так не работает
React не использует тег scripts, и то, что работает в теге script, не работает так же, как в React.
используйте свойство типа в вашей переменной изображения, т.е. image.type, будет работать. Если вы хотите, я могу написать ответ для этого
пожалуйста, буду признателен за ответ
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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.info(image.type); // this will output the mime, i.e "image/png" or "image/jpg"
setImageAsFile(imageFile => (image));
console.info(imageAsFile);
}
Я думаю, это может помочь stackoverflow.com/questions/18299806/…