Данные формы пустые после отправки их с Axios - PullRequest
Новая
       31

Данные формы пустые после отправки их с Axios

0 голосов
/ 20 ноября 2018

Я отправляю FormData из приложения VueJS, используя Axios.Проблема в том, что когда я вывожу FormData, он пуст.Я использовал тот же метод раньше при отправке файла (сейчас я не отправляю файл), а затем FormData показывает правильные данные, которые я к нему добавляю.Данные, которые я добавляю, имеют строку типа.

Клиентская сторона 

onUpload(): void {
      const fd = new FormData();
      fd.append("id", this.chosenRoute.id);
      fd.append("name", this.routeName);
      fd.append("description", this.routeDescription);
      fd.append("activity", this.activity);
      fd.append("preamble", this.preamble);
      axios.post('http://localhost:8080/editRoute', fd, {
      onUploadProgress: uploadEvent => {
        console.log('Upload Progress' + Math.round(uploadEvent.loaded / uploadEvent.total) * 100 + " %");
      }
    }).then(
      res => {
      console.log(res);
    });
  }

Серверная сторона 

app.post('/editRoute', function(req,res){
    console.log(req.body);
    const routeId = req.body.id;
    console.log(routeId);
    Route.findById(routeId, (err, route) => {
        res.set("Access-Control-Allow-Origin", "*");
        route.update(req.body);
    });
});

Ответы [ 2 ]

0 голосов
/ 21 ноября 2018

Разве вы не должны использовать .set () , а не .append () для обычных полей, я думал, что вы использовали .append () только для файлов?

Я также предлагаюкак в другом ответе упоминается нативный JSON для обработки данных форм, это намного более простое и чистое решение.

0 голосов
/ 21 ноября 2018

Из документации axios:

По умолчанию axios сериализует объекты JavaScript в JSON.

Таким образом, вы не можете просто передать объект JS FormData прямона варианты звонка axios.Если вы должны использовать FormData, см. Рекомендуемые методы здесь: https://www.npmjs.com/package/axios#using-applicationx-www-form-urlencoded-format

Однако, если, как вы упомянули выше, но то, что выглядит как пары ключ / значение, вообще не используйте FormData,но обычный объект JavaScript. 

const body = {
    "id": this.chosenRoute.id.
    "name": this.routeName,
    "description": this.routeDescription,
    "activity": this.activity,
    "preamble": this.preamble
}

axios.post('http://localhost:8080/editRoute', body, ...
...