

## 実現したいこと

javascriptでWEBからGCPのstorageに保存した画像を取得し、そのまま画像を再アップロードしたいです。

## 抱えている課題

GCPのstorageに保存した画像のURLは取得できている状態ですが、そのURLの情報から画像としてStorageへ再アップロードする方法が分かりません。

## 試したことと結果

まず、元々のアップロードは、以下のようにオーソドックスなfile形式で画像をローカルのPCのディスクから選択し、  
FileListへ入れてアップロードしています。

・htmlファイル

[code]

    <input type="file" name="datafile" id="logo-img-input"">
    
[/code]

・JSファイル

[code]

    let files = document.getElementById('logo-img-input').files;
    let image = files[0];
    let file_path = "xxx.jpg";
    ///画像アップロード
    let ref = firebase.storage().ref().child(file_path);
    ref.put(image, metadata).then(function(snapshot) {
        alert('アップロードしました');
    });
    
[/code]

ではこのアップロードした画像を次に取得する方に関して、  
まず上記コードでは省略していますが、httpから始まるURLを事前に取得してDBに保存してあり、  
現状はDBから直接読んでいるので、画像までのURLは持っている状態です。  
こちらのURLより、再度画像を取得し、そのまま特に画像には手を加えずアップロードができる状態にしたいです。

試したこととしては、今はファイル形式のinputのパターンをそのまま再現すればコードもそのまま使用できるため都合が良いと考え、仮に今このURLを  
<https://storage.cloud.google.com/xxx.jpg>  
とすると、

JSファイル

[code]

    /// fileを作成
    let file = new File([], 'https://storage.cloud.google.com/xxx.jpg',
    {
        lastModified: new Date(2017, 1, 1),
        type: "image/jpeg",
    });
    
    ///FileListの形式にする
    const dt = new DataTransfer();
    dt.items.add(file);
    const fileList = dt.files;
    console.log("fileList : ", fileList);
    
    let image = fileList[0];
    let file_path = "xxx.jpg";
    ///画像アップロード
    let ref = firebase.storage().ref().child(file_path);
    ref.put(image, metadata).then(function(snapshot) {
        alert('アップロードしました');
    });
    
    
[/code]

としても、FileListの出力が以下のようにsizeが0になってしまって、うまく取り込めていないようです。  
（inputから画像を入れた時は、これとの差分はsizeにファイルサイズ（バイト数）が入っていることくらいしかなさそうでした。）

> File {name: "https://storage.cloud.google.com/xxx.jpg", lastModified:
> 1485874800000, lastModifiedDate: Wed Feb 01 2017 00:00:00 GMT+0900 (日本標準時),
> webkitRelativePath: "", size: 0, …}  
>  lastModified: 1485874800000  
>  lastModifiedDate: Wed Feb 01 2017 00:00:00 GMT+0900 (日本標準時) {}  
>  name: "https://storage.cloud.google.com/xxx.jpg"  
>  size: 0  
>  type: "image/jpeg"  
>  webkitRelativePath: ""  
>  **proto** : File

また、念のためアップロードされたファイルを見てみても、一応jpgファイルとして扱われているようですが、ファイルサイズが0KBで保存されており、DLしてもからの異常なファイル扱いで表示されませんでした。

Blob形式を使えば何とかできるのかもしれないとは思ったのですが、  
Blobの取り扱いをしたことがなく、GCP Storageの画像情報をどう扱えば良いのかよく分かりませんでした。

一方で、imgタグのimg.srcに上記のパスを入れると正しく画像が表示されることは確認できました。  
例えばこのimgタグから、inputしてFileListへ追加するようなことができても解決となりますが、その方法もよく分かりませんでした。

## 背景

一応上記のようなことを行いたい背景としては、現在アカウント登録/管理のシステムを作っていて、  
初めに一度画像を登録したあとに、登録した情報を編集する際、画像自体も編集する場合は新しいもので登録するだけなので良いのですが、画像以外の情報を更新して、画像には変更がない場合は前回のものをそのままアップロードして最新のデータとする。といった仕組みにしたいと考えております。

こちらずっと解決できず、どなたか解決策がお分かりになる方がいらっしゃいましたら、  
大変お手数ですが、ご教授いただけると大変助かります。


CC BY-SA 4.0
2021-01-28T12:10:52.390
73652
2021-01-28T13:02:56.303
2021-01-28T13:02:56.303
3060
29911
question
javascript node.js firebase google-cloud google-cloud-storage
GCPのstorageに保存した画像を取得し、そのまま再アップロードする方法