【備忘録】formDataのエラーを解消

【問題】

・どうあがいてもformDataを用いてデータベースに保存ができなかった

・$.ajax({ の data でハッシュ形式でparamsを記入し無理やり動かしていたが

　画像投稿→保存で詰み

$("#new_message").on("submit", function(e) {

e.preventDefault();

var formData = new FormData(this);

console.log(formData);

var url = $(this).attr('action');

formData.append('body', $('.form__message').val());

 

$.ajax({

url : url,

type : 'POST',

data : { "message" : { "body" : $('.form__message').val() } },

dataType : "json",

// processData : false,

// contentType : false

})

.done(function(data){

var html = buildHTML(data);

$('.messages').append(html);

$('.form__message').val('');

$('.form__submit').prop('disabled', false);

})

.fail(function(){

alert('error');

})

});

【修正①】

var formData = new FormData(this);

これを

var formData = new FormData($(this).get(0));

こう

修正点：　$(this).get(0)

【修正②】

これを

$.ajax({

url : url,

type : 'POST',

data : { "message" : { "body" : $('.form__message').val() } },

dataType : "json",

processData : false,

contentType : false

})

こう

$.ajax({

url : url,

type : 'POST',

processData: false,

data : formData,

dataType : "json",

processData : false,

contentType : false

})

修正点：processData: false,を追加

【参考記事】

https://qiita.com/sho012b/items/f2558db5dad97d7e1b1d

引用元が明記されていて素晴らしい記事でした🙇‍♀️