與FormData一起使用JS FileReader

Question

我試圖將文件上傳到S3。我的用戶界面支持拖放和文件輸入元素，所以我的計劃是從drop和輸入事件返回的blob開始，使用FileReader加載它們的內容，然後使用FormData進行處理。

問題出在*****。它看起來好像.result是一個非零大小的數組緩衝區，但我在S3上找到的只是一個名爲${filename}的20b文件，其內容爲[object ArrayBuffer]。

那我在這個流程

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對象（但是，您可以把它作爲整個身體後）發送陣列緩存丟失。 FormData接受blob，所以你可以傳遞它。

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); 
     } 
    }); 

} 

注意您的服務器端邏輯將需要讀取字段名稱作爲文件字段。