FormDataでJS FileReaderを使用しています

Question

私はS3にファイルをアップロードしようとしています。私のUIは、ファイル入力要素のドラッグドロップをとに対応しているので、ドロップと入力イベントから返されたブロブで開始し、FileReaderを使用して内容をロードしてからFormDataを使用して処理します。

問題は*****です。 .resultは、ゼロ以外のサイズの配列バッファですが、S3で見つけた内容は、内容が[object ArrayBuffer]の${filename}と呼ばれる20bファイルです。あなたは（あなたがしかし、全体のポスト体としてそれを送ることができます）いるFormDataオブジェクトと配列バッファを送信することができない私は、この流れの中で

function sendSigned(fileObj, cb) { 
    console.log("send signed", fileObj) 
    let formData = new FormData(); 
    const host = "http://localhost:4000" 

    formData.append("key", fileObj.signature.stem + "${filename}"); 
    formData.append("x-amz-algorithm", "AWS4-HMAC-SHA256"); 
    formData.append("x-amz-credential", fileObj.signature.credential); 
    formData.append("x-amz-date", fileObj.signature.date); 
    formData.append("success_action_redirect", host + "/upload/success"); 
    formData.append("policy", fileObj.signature.policy); 
    formData.append("x-amz-signature", fileObj.signature.signature); 

    let fileReader = new FileReader(); 
    fileReader.onload = function(evt) { 
     console.log(evt); 
     // ****************************************** 
     // formData.append("file", evt.target.result); 
     formData.append("file", fileReader.result); 

     jQuery.ajax({ 
      url: 'http:\/\/uploads.s3.amazonaws.com', 
      data: formData, 
      cache: false, 
      contentType: false, 
      processData: false, 
      type: 'POST', 
      success: (res) => { 
       console.log(res); 
       let s3Conf = Object.assign(fileObj, { 
        confirmation: res.ETag, 
        zipname : fileObj.signature.stem + fileObj.nativeFiles[0].name, 
        status: "Done" 
       }); 
       cb(s3Conf); 
      }, 
      error: (err) => { 
       console.error(err); 
       let s3Conf = Object.assign(fileObj, { 
        error: err, 
        status: "Done" 
       }); 
       cb(s3Conf); 
      } 
     }); 
    } 
    fileReader.readAsArrayBuffer(fileObj.nativeFiles[0].blob); 
} 

Answer 1

をしないのです

。 FormDataはブロブを受け入れますので、渡すことができます。

function sendSigned(fileObj, cb) { 
    console.log("send signed", fileObj) 
    let formData = new FormData(); 
    const host = "http://localhost:4000" 

    formData.append("key", fileObj.signature.stem + "${filename}"); 
    formData.append("x-amz-algorithm", "AWS4-HMAC-SHA256"); 
    formData.append("x-amz-credential", fileObj.signature.credential); 
    formData.append("x-amz-date", fileObj.signature.date); 
    formData.append("success_action_redirect", host + "/upload/success"); 
    formData.append("policy", fileObj.signature.policy); 
    formData.append("x-amz-signature", fileObj.signature.signature); 
    formData.append("file", fileObj.nativeFiles[0].blob, fileObj.nativeFiles[0].name); 

    jQuery.ajax({ 
     url: 'http:\/\/uploads.s3.amazonaws.com', 
     data: formData, 
     cache: false, 
     contentType: false, 
     processData: false, 
     type: 'POST', 
     success: (res) => { 
      console.log(res); 
      let s3Conf = Object.assign(fileObj, { 
       confirmation: res.ETag, 
       zipname : fileObj.signature.stem + fileObj.nativeFiles[0].name, 
       status: "Done" 
      }); 
      cb(s3Conf); 
     }, 
     error: (err) => { 
      console.error(err); 
      let s3Conf = Object.assign(fileObj, { 
       error: err, 
       status: "Done" 
      }); 
      cb(s3Conf); 
     } 
    }); 

} 

サーバー側のロジックは、ファイルフィールドとしてフィールド名を読み取る必要があることに注意してください。