次の機能を使用して、S3に画像をアップロードすることはできますが、画像を取得しようとすると開くことができません。以下は、「react-dropzone」を使用してファイルを処理するReactアプリケーションで使用される関数です。
import axios, { post } from 'axios'
import { Buffer } from 'buffer'
const processImage = ({ file }) => {
const reader = new FileReader()
reader.onload = async () => {
const base64data = reader.result
const bufferdata = Buffer.from(base64data, 'base64')
const generateSignedS3Url = '/.netlify/functions/get-s3-urls'
// Obtains signed URLs from a Netlify Serverless Function
const { data } = await post(generateSignedS3Url, {
clientFilename: file.name,
mimeType: file.type,
}).catch(e => {
console.error('Error in generating signed url ', e)
})
axios({
method: 'PUT',
url: data.putUrl,
data: bufferdata,
headers: { 'Content-Type': file.type, 'Content-Encoding': 'base64' },
}).catch(e => {
console.error(e)
})
}
reader.readAsDataURL(file)
}
以下に、上記で呼び出されたサーバーレス関数の署名付きURLを取得するために使用されるパラメーターを示します。
const putParams = {
Bucket,
Key,
Expires: 2 * 60,
ContentType: body.mimeType,
ContentEncoding: 'base64',
}
const putUrl = s3.getSignedUrl('putObject', putParams)
ここでbody.mimeTypeは、になります'image/jpeg'。
同様のStackOverflowの質問からスキャンして、次のことを確認しました。
'Content-Encoding'はに設定されます'base64''Content-Type'は送信されるファイルと一致します（つまり、ファイル "background.jpg"の場合、ヘッダーは 'image / jpeg'に設定されます）送信する前に、同様のSOの質問を確認しました。彼らには、1、2、3。他にもありますが、それらはノードバックエンド用です。
reader.resultエンコードされたデータの前にプレフィックスがあります。MDNで説明されているように：
最初にBase64でエンコードされたデータの前にあるData-URL宣言を削除しないと、blobの結果をBase64として直接デコードすることはできません。Base64でエンコードされた文字列のみを取得するには、最初
data:*/*;base64,に結果から削除します。
したがって、次のようなことができます。
const base64data = reader.result.split(',')[1];
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加