image upload

在本篇文章中，我將分享如何使用Amazon Web Services提供的優秀雲端檔案存儲解決方案AWS S3來上傳圖像。 首先，安裝aws-sdk庫： npm install aws-sdk 在你的程式碼頂部導入它，以便在要添加文件上傳至S3功能的文件中使用它： import AWS from 'aws-sdk' 接下來，使用SDK來創建S3物件實例，並將其指派給s3變數： const s3 = new AWS.S3({ accessKeyId: process.env.AWS_S3_ACCESS_KEY_ID, secretAccessKey: process.env.AWS_S3_SECRET_ACCESS_KEY, }) 請注意，我在這裡使用了兩個環境變數AWS_S3_ACCESS_KEY_ID和AWS_S3_SECRET_ACCESS_KEY。 現在進行一些"管理工作"。你需要在AWS上創建一個具有AWSCloudFormationFullAccess和AmazonS3FullAccess權限的具有程序化訪問權限的IAM設定文件，以及一個該使用者可以訪問的S3存儲桶。 我不會在這裡涵蓋這個方面，因為你可以找到大量關於這方面的文章和文檔。我只會提到你需要的JavaScript代碼。 現在，你需要一個圖像blob來上傳。 你可以使用如下的URL： const imageURL = 'https://url-to-image.jpg' const res = await fetch(imageURL) const blob = await res.buffer() 或者，你可以從表單的圖像字段上傳的多部分表單中獲取圖像： const imagePath = req.files[0].path const blob = fs.readFileSync(imagePath) 最後，調用s3.upload()方法，並調用其.promise()方法，以便你可以使用await等待它完成以獲取上傳的文件對象： const uploadedImage = await s3.upload({ Bucket: process.env.AWS_S3_BUCKET_NAME, Key: req.files[0].originalFilename, Body: blob, }).promise() AWS_S3_BUCKET_NAME是S3存儲桶的名稱，另一個環境變數。 最後，你可以通過引用Location屬性來獲取上傳的圖像在S3上的URL： uploadedImage.Location 你必須確保你將S3存儲桶設置為公開，以便可以訪問該圖像的URL。

我有一個表單，其中包含一個文件輸入框，讓用戶上傳圖片： <input name='image' type='file' accept='image/\*' 我需要這個圖片的大小小於3MB。 因此，我將以下代碼添加到React應用程序中的onChange事件中，以實現此要求： <input name='image' type='file' accept='image/\*' onChange={(event) => { if (event.target.files && event.target.files[0]) { if (event.target.files[0].size > 3 \* 1000 \* 1024) { alert('最大允許的大小為3MB') return false } setImage(event.target.files[0]) setImageURL(URL.createObjectURL(event.target.files[0])) } }} />

我有一個需要使用檔案上傳圖片的需求，所以我添加了一個小小的 input type="file" 欄位： <input type="file"> 我只希望使用者能夠上傳圖片。 這是一個常見的需求，但我總是忘記如何實現。 使用 accept 屬性，將 image/* 傳遞進去以允許上傳所有圖片： <input type="file" accept="image/*"> 或者使用 image/png 只允許上傳 PNG 圖片： <input type="file" accept="image/png"> 同樣的語法也可以用於只允許上傳視頻： <input type="file" accept="video/*"> 或者音頻： <input type="file" accept="audio/*"> 或者它們的組合： <input type="file" accept="image/*,audio/*,video/*"> 當然，這只是在客戶端進行的驗證，當接收到檔案時，您也應該在伺服器端驗證媒體類型。