0
入力から画像を取得して変換してサーバーに送信するソリューションを探しています。入力から画像を取得してサーバーに送信する最善の方法JavaScript React App
フロントエンドにReact.js、バックエンドにNode.js + Postgresqlを使用しています。
サイズが小さい画像を撮影すると、base64に変換してbase64をデータベースに保存することは問題ありません。しかし、高解像度の画像では、データベースは要求が大きすぎると私に言った、私はそれを圧縮する必要があります。
画像を格納するには別の方法が必要です。画像をbase64に変換するのが効率的ではなく、高解像度画像を扱う場合に圧縮する方法があると思います。
現在、私はこの方法を使用していますが、前に説明したように、この方法は効率的ではなく、高解像度の画像サーバーではリクエストが長すぎると言いました。
フロントエンド：私は、画像を選ぶ コンポーネント：
<InsertItemComponent
name={"UPDATE IMAGE"}
cName={"input-file"}
req={false}
tType={"file"}
onChange={this.handleImage}
accept={".jpg, .jpeg, .png"}
/>
クラスInsertItemComponentはタイプが 'ファイル' 機能handleImageと単純な入力フィールドです：
handleImage = e => {
e.preventDefault();
let reader = new FileReader();
let file = e.target.files[0];
reader.onloadend =() => {
this.setState({
image: reader.result,
imgchange: true
});
}
reader.readAsDataURL(file);
}
そして、ユーザが新しいボタンをクリックするとサーバに送信 変更
私のデータベースイメージにはテキストタイプがあり、私のサーバには単に現在のイメージが更新されます。
：https://github.com/odysseyscience/react-s3-uploaderまたはhttps：//メディア.com/@ tewolfe2/5-step-to-uploading-files-and-images-to-s3-in-express-express-superagent-multer-and-46a9e72244a2またはhttps://medium.com/@kevinwu/client-side-file-upload-to-s3-using-axios-c9363ec7b530 – brub