Реагируйте на загрузку файла в mongodb node Js multer

Question

Я пытаюсь загрузить изображение в базу данных mongodb из реагирующего компонента. Я перепробовал все возможные способы, но сервер возвращает неопределенное в консоли. Вот код, с которым я борюсь: сначала форма реакции

<div className="md:w-1/2 h-7 m-auto mt-8 border-gray-900 rounded shadow-md">
    <form encType='multipart/form-data' className="m-auto text-center rounded h-auto px-8 border-gray-900">
      <div className="inline-block container m-auto pb-6 flex items-center py-2">
        <input className='hidden' name='StudentImage' type="file" onChange={this.fileSelectedHandler}
      </div>
      </div>

    </form>
  </div>

, затем обработчик выбора

fileSelectedHandler = e => {
    console.log(e.target.files[0]);
    this.setState({
      StudentImage: e.target.files[0]
    });
    const data = new FormData() 
    data.append('StudentImage', this.state.StudentImage);
    axios.post('http://localhost:4000/students/image',data)
    console.log(this.state.StudentImage.lastModified)
  };

и код node js бэкэнда

    destination: function (req, file, cb) {
      cb(null, 'assets/images')
    },
    filename: function (req, file, cb) {
      cb(null, file.fieldname + '-' + Date.now())
    }
  })

const fileFilter = (req, file, cb) => {
    if (file.mimetype === 'image/png' || file.mimetype === 'image/jpeg') {
        cb(null, true);
    } else {
        cb(null, false);
    }
};
const upload = multer({storage: storage, limits: { fileSize: '4MB' }, fileFilter: fileFilter}).single("StudentImage")

const router = express.Router();
router.post('/image', upload, async (req, res)=>{    
    console.log(req.file);

})

и строка console.log(req.file); выводит неопределенное значение

Answer 1

setState является асинхронным, поэтому вам не гарантирован доступ к новому значению состояния при попытке добавить this.state.StudentImage к data:

    this.setState({
      StudentImage: e.target.files[0]
    });
    const data = new FormData() 
    data.append('StudentImage', this.state.StudentImage);

this.setState занимает Второй аргумент, обратный вызов, который дает вам доступ к новому состоянию, так что это может работать лучше:

    this.setState({
      StudentImage: e.target.files[0]
    }, () => {
      const data = new FormData() 
      data.append('StudentImage', this.state.StudentImage);
      axios.post('http://localhost:4000/students/image',data)
      console.log(this.state.StudentImage.lastModified)
    });

Или просто используйте StudentImage вместо this.state.StudentImage, что было бы немного проще:

    const StudentImage = e.target.files[0];
    this.setState({ StudentImage });
    const data = new FormData();
    data.append('StudentImage', StudentImage);
    axios.post('http://localhost:4000/students/image',data)
    console.log(StudentImage.lastModified)

Другое дело: в узле, я думаю, вы хотите req.body вместо req.file.