Блог

Главная - Вопросы по программированию - отправить PDF-файл с FormData в react

отправить PDF-файл с FormData в react

javascript #html #reactjs #forms #form-data

#javascript #HTML #reactjs #формы #форма-данные

Вопрос:

У меня возникли проблемы с FormData для отправки PDF-файла

 const [file,setFile] = useState()
const [isFilePicked, setIsFilePicked] = useState(false);

наличие файла входного типа

 <input  accept=".pdf" type="file" onChange={uploadFile}/>

а затем функция onChange

     const uploadImage = async (e) =>{
  console.log(e.target.files[0])
  setFile(e.target.files[0])
  e.target.files[0] amp;amp; setIsFilePicked(true);
  }

В конце, когда я хочу отправить, я получил «FormData{}»

 const post = async () => {
    const formData = new FormData();
    formData.append('File',file);
    console.log(formData)
}

почему я это получаю???

Комментарии:

1. usestate является асинхронным. Я могу предположить, что для установки файла требуется время. попробуйте вызвать post в settimeout.

2. Ваша проблема решена? Если это так, пожалуйста, отправьте ответ

Ответ №1:

Интерфейс FormData не сохраняет добавленные пары ключ-значение непосредственно в себя, поэтому регистрация самих FormData ничего не выведет. Не волнуйтесь, файлы все равно «хранятся» в FormData. Чтобы получить console.log() возможность регистрировать файлы для вас, вы должны сначала извлечь файлы из FormData. Один из способов — получить итератор FormData и затем преобразовать его в объект. Пример:

 Object.fromEntries(formData.entries()) // will result in { "File": <your file> }

итак, в случае вашего фрагмента кода вы можете сделать следующее:

 const post = async () => {
  const formData = new FormData();
  formData.append('File',file);
  console.log(Object.fromEntries(formData.entries()))
}
Метки: