javascriptイメージのパスをファイル（リスト）オブジェクトに変換する

Question

私は、サーバー上の.pngイメージとmysqlデータベースのリンクを保存するファイルアップロードを持っています。アップロード前に画像のサムネイルを表示するには、ファイルリストオブジェクトをプレビュー画像に変換する機能があります。今度は、ユーザーが後でファイル選択を編集したいと思っています。そのために、サムネイルとしてサーバーから画像をロードする必要があります。私はこれを行う最善の方法は、ファイルオブジェクトにデータベースに格納されているファイルパスを変換し、このオブジェクトを私はこの関数を書き換える必要はないサムネイルを作成する関数に適用することだと思う。 私の質問は、どのように私は保存された画像リンクをファイルリストオブジェクトに変換できますか？

編集：は

アップロード：ユーザーによる

user selection -> file object -> base 64 -> blob -> display blob -> (maybe) edit -> upload selection as base 64 to server -> base 64 to .png -> save pic -> save link 

後で編集選択（どのように行うには？）：

saved link -> file object -> base 64 -> blob -> display blob -> (maybe) edit -> ... 

保存されたリンク - >ファイルオブジェクト実行する方法？可能？もっといい方法？ 私はそれが今理解することがより明確になることを願っています。

誰かがこれを行う方法やより良い方法を考えている場合は、答えてください。

（私が質問をしたときにコードを表示する必要があることを知っているが、私はここでは全体のアップロード機能をアップロードするnecesarryであるとは思わない）

Answer 1

あなたのプロセスは、すべての眉をひそめているので、私は正しく答えられないことがありあなたの質問ですが、私はこれがXYの問題だと確信しています。

Javascript FileオブジェクトはBlobオブジェクトから継承します。 MDNから

：

ファイルオブジェクトは、BLOBの特定の種類であり、そして任意のコンテキストのBlob缶に使用することができます。それはブロブに戻ってそれを変換するかどう

決しては、base64でdataURLにファイルを変換します。これは意味をなさないし、ブラウザーのメモリを汚染するだけです。

ブラウザー、メディア要素、またはiframeからBlob（またはファイル）を表示するには、URL.createObjectURL(blob)メソッドを使用します。これにより、開始ページの有効期間だけ利用可能なブロブリが返され、ユーザーのブラウザのみが返されます。ユーザーがアップロードしたファイルの場合、ファイルはメモリにコピーされず、返されたURIはユーザーのシステム上のファイルへの直接ポインタに過ぎません。

inp.onchange = function(){ 
 
    var url = URL.createObjectURL(this.files[0]); 
 
    var img = new Image(); 
 
    img.onload = function(){ 
 
     document.body.appendChild(this); 
 
    } 
 
    img.onerror = function(){ 
 
     console.log('probably not a supported image file'); 
 
    } 
 
    img.src = url; 
 
    }

<input id="inp" type="file" accept="image/*">

あなたがイメージを変更する必要がある場合は、キャンバス上の結果の画像を描画することによって行うことができます。
次に、キャンバスをdataURIにエクスポートする代わりに、toBlobメソッドを直接使用します（be polyfilled）。

サーバー上でFile/Blobを送信するには、30％重いBase64文字列の代わりにFile/Blobを直接送信します。
FormData APIのおかげで、これは本当に簡単に実行できます。

var xhr = new XMLHttpRequest(); 
xhr.onload = done; 
var formData = new FormData(); 
formData.append('file', theFile, fileName); 
xhr.open('POST', yourServer); 
xhr.send(formData); 

次に、基本Multipart/Formメソッドを使用してアップロードしたファイルのように、サーバー側で取得できます。