0

自動化のスクリプトを作っています。
目的のサイトでバイナリファイルを手作業でアップロードすると、Chromeのコンソールのnetworkから送られたFormDataを見るとfile: (binary)となっています。FormDataでbinaryと認識されるにはどうしたら良いでしょうか?

Blobでは中身は取り出せないのでFaileReaderで中身を読んで、特定の型付き配列で送信する?と思い以下を試しましたがだめでした。file: [Object object]になってしまいます。

xhr.responseType = 'blob'
xhr.onload = () => {
  let fr = new FileReader()
  fr.onload = e=> {
    let ab = new ArrayBuffer(fr.response)
    new Uint8Array(ab)//post
  }
  fr.readAsArrayBuffer(xhr.response)
}

https://developer.mozilla.org/ja/docs/XMLHttpRequest/Sending_and_Receiving_Binary_Data

上記には

Blob オブジェクトはファイルに似たオブジェクトで、immutable な生データです。データを表す blob は必ずしも
JavaScript ネイティブなフォーマットではありません。

とあったのでblobオブジェクトのまま送ってみたりもしましたが、file: [Object object]になってしまい、バイナリの生データとして送信できません。ご存知でしたらご教示いただければ幸いです。

質問追記

送信時にnew Blob([data], {type: image/png})とすることで、開発ツール>Network>Headers>FormDataのView parsedの値はfile: [object Object]からfile: (binary)にすることができました。が、View sourceを見ると

------WebKitFormBoundaryuGkybuBnzAfvgUoP
Content-Disposition: form-data; name="file"; filename="blob"
Content-Type: image/png

[object Object]

となっており、手作業でやった場合[object Object]がないという違いがあります。これはどういうことでしょうか?返ってきたエラーもjpg,pngのみとありるので、これが原因だと思います。ご教示いただければ幸いです。

上記の結果が得られたコードは以下です。

let xhr = new XMLHttpRequest()
xhr.responseType = 'blob'
xhr.onload = () => {
    let fd = new FormData()
    fd.append('file', new Blob([xhr.response], {type : 'image/png'}))
    $.ajax({
        type : 'POST',
        url : url
        data : fd,
        processData : false,
        contentType : false
    })
    .done(data => {
        console.log(data)
    })
    .fail((a,b,c) => {
        console.log(a,b,c)
    })
                }
xhr.open('GET', imgs[i], true)
xhr.send()
13
  • この辺でしょうか。どうすればjavascriptはblobをアップロードできますか?
    – kunif
    Commented 2019年10月23日 5:23
  • ありがとうございます。file: [object Object]で変わりありませんでした。
    – bafcom
    Commented 2019年10月23日 5:32
  • @kunif リンク先は stackoverflow のコンテンツを(無断で)機械翻訳したサイトです。参照先として示すにはあまり適さない気がします。
    – cubick
    Commented 2019年10月23日 5:34
  • @cibick 検索上位に来ることが多いので困りものですが、気を付けます。ではこちらで、作成時にタイプ指定でしょうか。File APIs(Blob, BlobURL, ArrayBuffer, FileReader)
    – kunif
    Commented 2019年10月23日 6:04
  • できました!ありがとうございます。
    – bafcom
    Commented 2019年10月23日 6:45

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。