ネイティブ・マルチパートに反応するXMLRequest - 認識されないFormDataの部分

Question

私のウェブサイトにいくつかのファイルをアップロードしようとしています。以下のコードは、通常のAPIリクエスト（添付ファイルはありません）の場合に機能します。しかし、ファイルをアップロードしようとすると、私はこのエラーレスポンスを得続けます："Unrecognized FormData part."。

export function HTTPRequest({body = {}, url = '', method = "POST", headers = {}, attachments = [], DEBUG = false}) { 
    return new Promise((resolve, reject) => { 
    const attachmentsCount = Object.keys(attachments).length * 1 
    const ContentType = 0 < attachmentsCount ? "multipart/form-data" : "application/x-www-form-urlencoded" 

    const submitXML = (xhrBody) => { 
     let xhr = new XMLHttpRequest() 
     xhr.open(method, url) 
     headers["Content-Type"] = ContentType 
     //headers["Accept"] = "application/json" 
     for(var h in headers) { 
     xhr.setRequestHeader(h, headers[h]) 
     } 
     xhr.addEventListener('load', (res) => { 
     switch(res.target.status) { 
      case 200: return resolve(DEBUG ? res.target.response : JSON.parse(res.target.response)) 
      default: return reject(res) 
     } 
     }, false) 
     xhr.onerror = e => reject(e) 
     xhr.send(xhrBody) 
    } 

    switch(attachmentsCount) { 
     case 0: 
      var request = JSON.stringify(body) 
      submitXML(request) 
     break 
     default: 
     let xhrBody = new FormData() 
     xhrBody.append("_photosCount", String(attachmentsCount)) 
     attachments.map((file, i) => { 
     xhrBody.append('file', {name: file.name, src: file.src, type: file.type}) 
     }) 
     xhrBody.append('data', body) 
     console.log(xhrBody); 
     submitXML(xhrBody) 
    } 
    }) 
} 

私はそれをログに記録しようとした後、これがいるFormDataオブジェクトです：

0:"file" 
    1: Object 
    name:"FB_IMG_1498693908215.jpg" 
src:"content://com.google.android.apps.photos.contentprovider/-1/1/content%3A%2F%2Fmedia%2Fexternal%2Fimages%2Fmedia%2F175865/ORIGINAL/NONE/1351181913" 
    type:"image/jpeg" 

Answer 1

あなたはマルチパートの境界マーカーを記述するパラメータなしでmultipart/form-dataにContent-Typeヘッダを設定しています。

Content-Typeヘッダーのままにします。 XMLHttpRequestをFormDataオブジェクトから生成させます。