file upload

以簡單易懂的方式解釋如何使用Fetch API將文件上傳到服務器上。 有一個看似簡單的任務有時會讓人花上幾個小時在網上進行研究：將文件上傳到服務器。 在這篇教程中，我將向您解釋如何使用fetch來實現這樣的功能。 給定一個包含文件輸入字段的表單： <input type="file" id="fileUpload" /> 我們在其上附加一個change事件處理程序： document.querySelector('#fileUpload').addEventListener('change', event => { handleImageUpload(event) }) 然後我們在handleImageUpload()函數中處理大部分的邏輯： const handleImageUpload = event => { const files = event.target.files const formData = new FormData() formData.append('myFile', files[0]) fetch('/saveImage', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { console.log(data) }) .catch(error => { console.error(error) }) } 在這個例子中，我們向/saveImage端點發送POST請求。 我們初始化一個名為formData的新的FormData對象，並將上傳的文件附加到其中。如果我們有多個文件輸入元素，將會有多個append()調用。 第二個then()中的data變量將包含JSON解析後的返回數據。我假設你的服務器會以JSON格式作為響應返回。 參考 如何在服務器端處理上傳的圖片

在網絡應用程序中，上傳文件並在後端進行處理是最常見的文件處理功能之一。例如，上傳頭像或附件。 假設我們有一個HTML文件輸入元素： <input type="file" id="fileUpload" /> 我們在#fileUpload DOM元素上註冊一個變化事件處理程序，當用戶選擇一個圖像時，我們會觸發handleImageUpload()函數並傳入所選文件。 const handleImageUpload = event => { const files = event.target.files const formData = new FormData() formData.append('myFile', files[0]) fetch('/saveImage', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { console.log(data.path) }) .catch(error => { console.error(error) }) } document.querySelector('#fileUpload').addEventListener('change', event => { handleImageUpload(event) }) 我們使用Fetch API將文件發送到服務器。當服務器成功返回時，它將在path屬性中發送圖像路徑給我們。 有了這一點，我們可以進行需要的操作，比如用圖像更新界面。 使用Node.js處理文件上傳的服務器端處理 下面是服務器端代碼的詳細說明。我們使用Node.js和Express框架來處理請求。 安裝express-fileupload npm模塊： npm install express-fileupload 在中間件中使用它： import fileupload from 'express-fileupload' //或 const fileupload = require('express-fileupload') 在創建Express應用程序之後，添加以下代碼：...

在本篇文章中，我將分享如何使用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。

我在 Next.js 頁面中有一個表單： <form method="post" action="/api/new" enctype="multipart/form-data">...</form> 該表單呼叫一個 API 端點。 在這個表單中，我有一個 file 輸入控制元件： <input name="logo" type="file" /> 然而在 API 路由中，我無法得到這個檔案。 我進行了一些搜索，結果發現 Next.js 預設並不允許這樣做。我嘗試了幾種解決方案，因為有些解決方案不能很好地上傳文件並同時傳送多個相同屬性的複選框。有些解決方案中，我能得到該檔案，但其餘部分的表單功能則無法正常工作。 我必須安裝兩個套件： npm install next-connect multiparty 我在 Next.js 專案的根目錄中創建了一個 middleware 資料夾，在其中創建了這個檔案： middleware/middleware.js import nextConnect from 'next-connect' import multiparty from 'multiparty' const middleware = nextConnect() middleware.use(async (req, res, next) => { const form = new multiparty.Form() await form.parse(req, function (err, fields, files) { req.body = fields req.files = files next() }) }) export default middleware 然後我將 API 路由從通常的結構改為：...

本文將教你如何使用 Node.js，特別是 Express，來處理檔案上傳。 首先，安裝 express-fileupload npm 模組： npm install express-fileupload 然後將它加入至中介軟體： import fileupload from 'express-fileupload' // 或者 const fileupload = require('express-fileupload') 在你建立了 Express 應用程式之後，加入以下程式碼： app.use( fileupload(), //... 這是必要的，否則伺服器將無法解析檔案上傳。 現在上傳的檔案將會在 req.files 中提供。如果你忘記加入這個中介軟體，req.files 會是 undefined。 以下是處理檔案的最小程式碼範例： app.post('/saveImage', (req, res) => { const image = req.files.myFile const path = __dirname + '/images/' + image.name image.mv(path, (error) => { if (error) { console.error(error) res.writeHead(500, { 'Content-Type': 'application/json' }) res.end(JSON.stringify({ status: 'error', message: error })) return } res....

我有一個簡單的使用案例。 我正在建立一個工作看板，現在是建立提交新工作職位的表單的時候了。 招聘人員可以輸入公司詳細資料、職位詳細資料和公司標誌圖片。 數據存儲在數據庫中，起初我試圖將標誌存儲在數據庫中，但過了一段時間，我意識到儘管在技術上是可行的，但在存儲二進制數據方面存在一些問題，而且任務需要花費太長的時間。因此，我決定將其上傳到 S3。 S3是AWS提供的一個出色的服務。由於我已經在其他方面使用AWS，添加S3存儲桶很容易。 所以我去創建了一個S3存儲桶。 我已經有了一個AWS帳戶。如果您沒有，請從這裡開始: https://aws.amazon.com。 一旦設置好帳戶，請在AWS中創建一個IAM用戶。登錄AWS，點擊頂部的您的名稱，然後點擊“我的安全憑證”。 在側邊欄中點擊“用戶”和“添加用戶”。啟用“編程訪問。” 通過頁面底部的按鈕（“下一步: 權限”）來轉到下一個屏幕。 點擊“直接附加現有策略”： 在過濾器中輸入“S3”以顯示S3策略 選擇AmazonS3FullAccess權限： 用戶創建完成後，您將獲得一對訪問密鑰ID和安全訪問密鑰。將其複製到您的項目中的.env文件中，或者存儲在某個地方以便以後使用。 接下來，進入S3並創建一個存儲桶。從S3首頁https://s3.console.aws.amazon.com點擊“創建存儲桶”按鈕。 設置一個名稱，選擇一個AWS區域，禁用“阻止所有公共訪問”（我們將在另一篇文章中討論權限），然後點擊頁面底部的“創建存儲桶”按鈕。 完成！現在是深入研究Node.js的時候了。我在Next.js中在API調用中使用這段代碼。 首先使用npm install aws-sdk安裝aws-sdk包。 如前所述，將您的AWS訪問代碼存儲在.env中： AWS_ACCESS_KEY_ID=<訪問密鑰> AWS_SECRET_ACCESS_KEY=<安全訪問密鑰> AWS_BUCKET_NAME=<存儲桶名稱> 在頂部添加 import AWS from 'aws-sdk' 然後使用以下代碼初始化s3對象： const s3 = new AWS.S3({ accessKeyId: process.env.AWS_ACCESS_KEY_ID, secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY }) 現在，當您想要上傳文件時，從存儲中加載它： const filename = '文件名' const fileContent = fs.readFileSync(fileName) const params = { Bucket: process.env.AWS_BUCKET_NAME, Key: `${filename}.jpg`, Body: fileContent } s3.upload(params, (err, data) => { if (err) { reject(err) } resolve(data....