在網絡應用程序中，上傳文件並在後端進行處理是最常見的文件處理功能之一。例如，上傳頭像或附件。

假設我們有一個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應用程序之後，添加以下代碼：

app.use(
 fileupload(),
 //...

這是必需的，否則服務器無法解析文件上傳。

現在上傳的文件可以在req.files中找到。如果忘記添加此中間件，req.files將為undefined。

app.post('/saveImage', (req, res) => {
 const fileName = req.files.myFile.name
 const path = \_\_dirname + '/images/' + fileName

 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.writeHead(200, {
 'Content-Type': 'application/json'
 })
 res.end(JSON.stringify({ status: 'success', path: '/img/houses/' + fileName }))
 })
})

這是處理文件所需的最少代碼。我們調用上傳圖像的mv屬性。這是由express-fileupload模塊提供給我們的。我們將其移動到path，然後將成功（或錯誤！）的信息傳遞回客戶端。

檢查客戶端上傳文件的屬性

如果您需要檢查文件類型或文件大小，可以在handleImageUpload函數中對其進行預處理，像這樣：

const handleImageUpload = event => {
 const files = event.target.files
 const myImage = files[0]
 const imageType = /image.\*/

 if (!myImage.type.match(imageType)) {
 alert('抱歉，只允許上傳圖像文件')
 return
 }

 if (myImage.size > (100\*1024)) {
 alert('抱歉，圖像文件的最大允許大小為100KB')
 return
 }

 //...
}