回答編集履歴

2 修正

agepan

agepan score 62

2018/07/20 17:42  投稿

[こちらのサイト](http://amaraimusi.sakura.ne.jp/sample/js/file_binary/blob_file_read.html)のコードを参考にしまして、以下のコードを書いてみたところアップロードができるようになりました(この書き方が正解なのかは分かりません)。
これよりももっとシンプルに書くやり方があるのかも?しれませんのと、下記で「バイトデータ」とあるのはバイナリデータのこと?なのかもよく分かりませんので、知識おありの方いらっしゃいましたら教えて頂きましたら幸いです。
```JavaScript
 var ncmb = new NCMB("XXXXXX", "XXXXX"); // 正しいキーを入力済みです
 // FileReaderで画像ファイルからBlobを取得、そのBlobをFileReader(ファイルオブジェクト)で読み込む 
 var onFormSend = function(){
   var file = 'file:///〜〜/test.jpg';
   // サーバー上の画像ファイルから、Ajaxを利用してバイトデータを取得する…ここではサーバーではなくローカルにあるファイルを指定
   var xhr = new XMLHttpRequest();
       xhr.open('GET', file, true);
       xhr.responseType = 'arraybuffer';
       xhr.onload = function(e) {
         // 画像ファイルのバイトデータを取得する
         var arrayBuffer = this.response;
         // バイトデータとコンテンツタイプからBlobを生成する
         var blob = new Blob(file); // オリジナル:var blob = new Blob([arrayBuffer], {type: "image/png"});
         var blob = new Blob([arrayBuffer]); // オリジナル:var blob = new Blob([arrayBuffer], {type: "image/png"});
         // FileReaderでBlobを読み取る
         var reader = new FileReader();
             reader.readAsDataURL(blob);
             // Blob読込後のイベント
             reader.onload = function(evt) {
               // アップロード処理
               var fileName = 'test.jpg'; // ここでファイル名を指定
               var fileData = blob;
               ncmb.File.upload(fileName, fileData)
                 .then(function(res){
                   // アップロード後処理
                   alert('アップロードできました');
                 })
                 .catch(function(err){
                   // エラー処理
                   alert('アップロード失敗');
                 });
             }
       };
       xhr.send();
 }
 onFormSend(); // アップロード実行
```
1 追記

agepan

agepan score 62

2018/07/20 17:33  投稿

[こちらのサイト](http://amaraimusi.sakura.ne.jp/sample/js/file_binary/blob_file_read.html)のコードを参考にしまして、以下のコードを書いてみたところアップロードができるようになりました(この書き方が正解なのかは分かりません)。
これよりももっとシンプルに書くやり方があるのかも?しれませんので、知識おありの方いらっしゃいましたら教えて頂きましたら幸いです。
これよりももっとシンプルに書くやり方があるのかも?しれませんのと、下記で「バイトデータ」とあるのはバイナリデータのこと?なのかもよく分かりませんので、知識おありの方いらっしゃいましたら教えて頂きましたら幸いです。
```JavaScript
 var ncmb = new NCMB("XXXXXX", "XXXXX"); // 正しいキーを入力済みです
 // FileReaderで画像ファイルからBlobを取得、そのBlobをFileReader(ファイルオブジェクト)で読み込む 
 var onFormSend = function(){
   var file = 'file:///〜〜/test.jpg';
   // サーバー上の画像ファイルから、Ajaxを利用してバイトデータを取得する…ここではサーバーではなくローカルにあるファイルを指定
   var xhr = new XMLHttpRequest();
       xhr.open('GET', file, true);
       xhr.responseType = 'arraybuffer';
       xhr.onload = function(e) {
         // 画像ファイルのバイトデータを取得する
         var arrayBuffer = this.response;
         // バイトデータとコンテンツタイプからBlobを生成する
         var blob = new Blob(file); // オリジナル:var blob = new Blob([arrayBuffer], {type: "image/png"});
         // FileReaderでBlobを読み取る
         var reader = new FileReader();
             reader.readAsDataURL(blob);
             // Blob読込後のイベント
             reader.onload = function(evt) {
               // アップロード処理
               var fileName = 'test.jpg'; // ここでファイル名を指定
               var fileData = blob;
               ncmb.File.upload(fileName, fileData)
                 .then(function(res){
                   // アップロード後処理
                   alert('アップロードできました');
                 })
                 .catch(function(err){
                   // エラー処理
                   alert('アップロード失敗');
                 });
             }
       };
       xhr.send();
 }
 onFormSend(); // アップロード実行
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る