画像のアップロード - サーバ側の処理に適した画像データの取得方法

Question

サーバ側で画像を処理するのにsharp、画像ファイルを取得するのにreact dropzoneを使用しています。私はドロップゾーンからサーバーにファイルを投稿すると、私は次のようになりますrequest.bodyのうち、ブロブを取得：

{ preview: 'blob:http%3A//127.0.0.1%3A3000/1451580a-b24f-478f-a9f7-338c0d790829' }

必要に応じて、私は、サーバーにデータを送信する前に私がFileReaderの（または何かを使用することができますそれ以外の場合は画像ファイルで何かを行い、それをブロブに変えないでください）。

シャープがかかる：JPEG、PNG、WEBP、GIF、SVG、TIFF

生画素の画像データ

最も主要で、イメージファイルへのパスを含む文字列を含む

• Aバッファーをサポートされているフォーマット

私はサポートされているフォーマットをシャープにするためにどのように使用できますか？

Answer 1

あなたのサーバー上の写真ファイルにアクセスするために、Multerというnode.jsモジュールを試してみることをおすすめします。

https://github.com/expressjs/multer

まず、クライアント上で、次のようにFormDataオブジェクトにファイルを追加したいと思う：

// obtain the file from your react dropzone and save it to this file variable 
const file = dropzone.file // not sure how you do this with react dropzone 
const data = new FormData() 
data.append('photo', file) 

次に、あなたのサーバーに反対FORMDATAこれをお送りします。サーバー上では、写真の処理に使用しているルート上でMulterを使用します。

npmをインストールして、サーバまたはルートファイルにインストールする必要があることを確認してください。 1つのファイルを送信している場合は、「単一の」方法を使用します。別のことをしたい場合は、APIのドキュメントを参照してください。この例のルートで

app.post('/photos', multer().single('photo'), controller.processPhoto); 

、あなたが/写真にPOSTリクエストを送信している、multerは「写真」のいるFormDataキーを使用してファイルを探してとリクエストオブジェクトにそれを追加しています。

この 'controller.processPhoto'メソッドでは、画像にリクエストオブジェクトのプロパティとしてreq.fileという名前でアクセスできます。これにより、必要なように聞こえる画像バッファーreq.file.bufferなど、多くの優れた情報に簡単にアクセスできます。 （も、mimetype、元の名前など）

これはあなたが始めるために十分である必要があります。