Исправление ошибки: невозможно прочитать свойство 'путь' из неопределенного

Question

Я использую MERN и multer для публикации и получения изображений и данных. У меня нет проблем с выполнением этого в Postman, но когда я запускаю код, он компилирует следующую ошибку:

TypeError: Cannot read property 'path' of undefined
    at router.post (...routes\property.js:42:34)

Код:

router.post('/add', upload.single('propertyImage'), (req, res, next) => {
  console.log(req.file)
  const propertyImage = req.file.path;

I'm предполагая, что мой req звонок неправильный? Я попытался изменить req на req.file и req.body.propertyImage, но это приводит к другой ошибке или к той же самой ошибке.

Что мне здесь не хватает?

Answer 1

вам нужно добавить

enctype = "multipart/form-data" 

в теге формы вашего html

что-то вроде

  form(method='POST', action='/add', enctype = "multipart/form-data")

ссылка: https://www.npmjs.com/package/multer (см. Основы c Использование)

Answer 2

Ошибка:

TypeError: Cannot read property 'path' of undefined
    at router.post (...routes\property.js:42:34)

говорит о том, что ни один файл не может быть декодирован сервером. Вы должны убедиться в 2 вещах:

1. вы действительно правильно загрузили файл

2. Вы используете правильное Middleware в Express для декодирования файл

Давайте окунемся в него.

ЧАСТЬ 1 (КЛИЕНТ) - Убедитесь, что вы правильно загрузили файл. Допустим, вы используете upload.single('propertyImage'), тогда ваш файл должен также иметь имя propertyImage, чтобы Малтер знал, как декодировать запрос multipart/form-data и отделить файл от остальной части ввода, поскольку файл и входы объединены специальным способом, который могут быть извлечены только специальными декодерами, такими как Multer.

Вы можете использовать тип содержимого multipart/form-data. Пример с Ax ios:

var payload = {
  input1: 'value1',
  propertyImage: file, // file must be a file object
};

var formData = new FormData();

for (let key in payload ) {
  formData.append(key, payload[key]);
}

axios({
  method: 'post',
  url: '/add',
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  data: formData,
})

ЧАСТЬ 2 (СЕРВЕР) - Используйте декодер для анализа входных данных:

const app = express();
// Middlewares
...
app.use(express.json());
app.use(express.urlencoded({ extended: false }));// put true for nested objects/arrays inputs
...

Проверьте настройку Multer:

const multer = require('multer');

const port = process.env.APP_PORT || 3500;

const entityStorage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'public/images');// check for correct permission
  },
  filename: (req, file, cb) => {
    const name = 'file-' + Date.now() + '-' + file.originalname;
    cb(null,  name);
  }
});

const upload = multer({storage: entityStorage});

Теперь вы сможете получить файл как:

router.post('/add', upload.single('propertyImage'), (req, res, next) => {
  // log the file object, file is default property name
  console.log(req.file)

  // rest of the inputs
  console.log(req.file)


  return; //cancel it
}