Блог

Главная - Вопросы по программированию - Как передать файл img в форму

Как передать файл img в форму

#javascript #node.js

Вопрос:

У меня есть форма загрузки изображения, которая отправляет запрос на отправку в конечную точку узла / загрузку. Вот, мой app.js запрашивает переменную файла из формы, а затем (с помощью Multer) помещает этот файл в специальный каталог загрузки.

 <form
        id="form"
        action="/upload"
        method="POST"
        enctype="multipart/form-data"
      >
 
     // when formBtn is changed (file selected) declare file var and submit
    formBtn.addEventListener("change", function () {
      // file that is requested in app.js
      const file = this.files[0];
      form.submit()
    });

Я пытаюсь добавить функцию перетаскивания. В теле я добавил <body ondrop="dragHandler(event);"> , который вызывает функцию dragHandler ondrop и передает событие. Функция dragHander() предотвращает действие по умолчанию (открытие изображения в браузере), проверяет, был ли удален файл, определяет файл и отправляет форму.

 function dragHandler(event) {
      var file;
      event.preventDefault();
      if (event.dataTransfer.items) {
        if (event.dataTransfer.items[0].kind == "file") {
          file = event.dataTransfer.items[0].getAsFile();
          form.submit;
        } else console.log('not a file');
      }

Поскольку отброшенный файл не был загружен в форму, запрос post (сделанный формой) не содержит переменной файла и не передает эту информацию обратно в app.js. Как бы я мог вставить свою файловую переменную (в dragHandler) в форму, чтобы ее можно было правильно перенести в app.js?

app.js:

 app.post("/upload", (req, res, next) => {
  upload(req, res, (err) => {
    if (err) {
      console.log("err: "   err);
    } else {
      // req.file is undefined when dropped in
      if (req.file == undefined) {
        console.log("file is not defined");
      } else {
        console.log(req.file);
      }
    }
  });
});

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

1. Вы должны изменить это if выражение, чтобы на самом деле проверить наличие необходимых данных, вы должны использовать if (event.dataTransfer amp;amp; event.dataTransfer.items.length >= 1) его вместо этого — и вы должны зарегистрировать ошибку или выбросить, если произойдет что-то неожиданное.

2. @Dai Хорошее предложение, даже не подумал об этом.

Метки: