質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

634閲覧

AWS S3 Uploadの仕方 React nodejs

busiRyu110

総合スコア2

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2022/06/16 15:06

nodejsからpngなどのfileをuploadしたいと考えております。
最新の@aws-sdk/client-s3を使用しています。
現状のコードを記載します。
functionの中にだけ記載します

node.js

1 let uploadParams: PutObjectCommandInput = { 2 Bucket: `${env.BUCKET}`, 3 Key: filePath, // 例:sample.png 4 Body: fileContent, // 例:sample.png 5 }; 6 7 const command = new PutObjectCommand(uploadParams); 8 9 await s3.send(command);

問題はbodyかと思います。このfilePathはFront側からFilePathを取得して渡しているだけなので、ただ文字列を入れている状況になっています。

Frontから下記のデータのnameをfilePathとして渡しています。

files: File lastModified: 1621667667348 lastModifiedDate: Sat May 22 2021 16:14:27 GMT+0900 (日本標準時) {} name: "スクリーンショット (106).png" size: 615548 type: "image/png" webkitRelativePath: ""

どのようにしてBackend側にBodyの情報(File)としてFilePathを渡すのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi-sun

2022/06/17 02:50

https://maku.blog/p/m8kv8it/ この記事のファイルをDLして扱う時にバイナリで持ってきてるようなので 普通にfs.readFileSyncで読みだしたものを使えば良いのでは? ```js const fs = require("fs"); const fileContent = fs.readFileSync(`${__dirname}/sample.png`); ```
busiRyu110

2022/06/18 14:07

試してみたのですが、できそうにないですね。 Frontの関数の中身なのですが、decodedFileのところだけなぜか取得できないんですよね ``` reader.readAsDataURL(e.target.files[0]); reader.onload = () => { const encodedData = reader.result; const base64EncodingFile = () => { if (encodedData) { console.log(`ereee`); // const fileData = (encodedData as any).replace( // /data:.*\/.*;base64,/, // // eslint-disable-next-line prettier/prettier // "" // ); // eslint-disable-next-line prettier/prettier // const fileData = (encodedData as any).replace(/^data:\w+\/\w+;base64,/, '') let s = Buffer.from(encodedData as any).toString("base64"); const fileExtension = encodedData .toString() .slice( (encodedData as any).indexOf("/") + 1, (encodedData as any).indexOf(";") ); console.log("fileExtension", fileExtension); const contentType = encodedData .toString() .slice( (encodedData as any).indexOf(":") + 1, (encodedData as any).indexOf(";") ); console.log("contentType", contentType); // const decodedFile = Buffer.from(fileData); const decodedFile = Buffer.from(s as any, "base64").toString(); console.log("decodedFile", decodedFile); setDecodeFilePath(decodedFile); setFileExtensionPath(fileExtension); setContentPath(contentType); ```
busiRyu110

2022/06/18 14:43

base64までは取得できます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問