이것에 무엇이 잘못되었는지 말해 줄 수 있습니까?

var formdata = new FormData();
formdata.append("key", "value");
console.log(formdata);

내 출력은 다음과 같습니다. "키"- "값"쌍을 찾을 수 없습니다.

FormData
*__proto__: FormData
**append: function append() { [native code] }
***arguments: null
***caller: null
***length: 0
***name: "append"
***prototype: append
***__proto__: function Empty() {}
*constructor: function FormData() { [native code] }
**arguments: null
**caller: null
**length: 0
**name: "FormData"
**prototype: FormData
**toString: function toString() { [native code] }
*__proto__: Object
**__proto__: Object
**__defineGetter__: function __defineGetter__() { [native code] }
**__defineSetter__: function __defineSetter__() { [native code] }
**__lookupGetter__: function __lookupGetter__() { [native code] }
**__lookupSetter__: function __lookupSetter__() { [native code] }
**constructor: function Object() { [native code] }
**hasOwnProperty: function hasOwnProperty() { [native code] }
**isPrototypeOf: function isPrototypeOf() { [native code] }
**propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
**toLocaleString: function toLocaleString() { [native code] }
**toString: function toString() { [native code] }
**valueOf: function valueOf() { [native code] }

이해할 수 없습니다! 어제는 너무 잘 작동했고 오늘은 내 머리가 키보드를 너무 많이 추락했습니다! Firefox, Chrome, 둘 다 동일 : /

Chrome 50+ 및 Firefox 39+의 새로운 기능 (resp. 44+) :

• formdata.entries()( Array.from()디버깅 가능성을 위해와 결합 )
• formdata.get(key)
• 더 유용한 방법

원래 답변 :

FormData객체 를 '디버그'하기 위해 일반적으로하는 일은 객체를 (어디서나!) 보내고 브라우저 로그 (예 : Chrome devtools의 네트워크 탭)를 확인하는 것입니다.

동일한 Ajax 프레임 워크가 필요하지 않습니다. 세부 정보가 필요하지 않습니다. 그냥 보내주세요 :

var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(data);

쉬운.

작동하지 않는다고합니다. 어떤 일이 일어나기를 기대하십니까?

FormData개체 에서 데이터를 가져올 방법이 없습니다 . XMLHttpRequest객체 와 함께 데이터를 보내는 데 사용하기위한 것입니다 ( send메서드 용).

거의 5 년 후 업데이트 : 일부 최신 브라우저에서는 더 이상 사실이 아니며 이제 FormData데이터를 채우는 것 외에도에 제공된 데이터를 볼 수 있습니다. 자세한 내용은 허용되는 답변 을 참조하십시오.

내가 처음에 겪었던 것과 같은 문제가 있었을 수도 있습니다. FormData를 사용하여 모든 입력 파일을 가져와 이미지를 업로드하려고했지만 동시에 서버에 전달 된 정보에 세션 ID를 추가하고 싶었습니다. 이번에는 정보를 추가하면 객체에 액세스하여 서버에서 볼 수있을 것이라고 생각했습니다. 내가 틀렸어. FormData에 추가 할 때 서버에 추가 된 정보를 확인하는 방법은 간단한 $_POST['*your appended data*']쿼리입니다. 이렇게 :

js :

$('form').submit(function(){
    var sessionID = 8;
    var formData = new FormData(this);
    formData.append('id', sessionID);

    $.ajax({
        url: "yoururl.php",
        data: formData,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function(data){
            alert(data);
        }
    });
});

그런 다음 PHP에서 :

$sessionID = $_POST['id'];
$files = $_FILES['image'];

$foreach ($files as $key=>val){
    //...
}

Chrome을 사용하는 경우 게시물 데이터를 확인할 수 있습니다.

Post 데이터를 확인하는 방법은 다음과 같습니다.

1. 네트워크 탭으로 이동
2. 게시물 데이터를 보내는 링크를 찾으십시오.
3. 그것을 클릭하십시오
4. 헤더에서 Request Payload를 확인하여 게시 데이터를 확인할 수 있습니다.

사용할 필요가 있음을 알 수 있습니다 console.log(formData.getAll('your key')). 보는 https://developer.mozilla.org/en-US/docs/Web/API/FormData/getAll

웹 브라우저 콘솔에 양식 데이터가 나타나지 않습니다.

for (var data of formData) {
  console.log(data);
}

이 방법으로 시도해보십시오.

제 경우에는 Edge 브라우저에서 :

  const formData = new FormData(this.form);
  for (const [key, value] of formData.entries()) {
      formObject[key] = value;
  }

나에게 같은 오류를 줘

그래서 저는 사용하지 않고 FormData수동으로 개체를 만듭니다.

import React from 'react';    
import formDataToObject from 'form-data-to-object';

  ...

let formObject = {};

// EDGE compatibility -  replace FormData by
for (let i = 0; i < this.form.length; i++) {
  if (this.form[i].name) {
    formObject[this.form[i].name] = this.form[i].value;
  }
}

const data = formDataToObject.toObj(formObject): // convert "user[email]":"customer@mail.com" => "user":{"email":"customer@mail.com"}

const orderRes = await fetch(`/api/orders`, {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
      });

const order = await orderRes.json();

반응 버전

헤더가 있는지 확인하십시오. 'content-type': 'multipart/form-data'

_handleSubmit(e) {
    e.preventDefault();
    const formData = new FormData();
          formData.append('file', this.state.file);
    const config = {
      headers: {
        'content-type': 'multipart/form-data'
      }
    }

     axios.post("/upload", formData, config)
         .then((resp) => {
             console.log(resp)
         }).catch((error) => {
    })
  }

  _handleImageChange(e) {
    e.preventDefault();
    let file = e.target.files[0];
    this.setState({
      file: file
    });
  }

전망

  #html
 <input className="form-control"
    type="file" 
    onChange={(e)=>this._handleImageChange(e)} 
 />