如何使用JavaScript將文件上傳到服務器
在網絡應用程序中，上傳文件並在後端進行處理是最常見的文件處理功能之一。例如，上傳頭像或附件。
假設我們有一個HTML文件輸入元素：
1
| <input type="file" id="fileUpload" />
|
我們在#fileUpload DOM元素上註冊一個變化事件處理程序，當用戶選擇一個圖像時，我們會觸發handleImageUpload()函數並傳入所選文件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| 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模塊：
1
| npm install express-fileupload
|
在中間件中使用它：
1
2
3
| import fileupload from 'express-fileupload'
//或
const fileupload = require('express-fileupload')
|
在創建Express應用程序之後，添加以下代碼：
1
2
3
| app.use(
fileupload(),
//...
|
這是必需的，否則服務器無法解析文件上傳。
現在上傳的文件可以在req.files中找到。如果忘記添加此中間件，req.files將為undefined。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| 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函數中對其進行預處理，像這樣：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| 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
}
}
|
tags: [“file upload”, “JavaScript”, “Node.js”, “Express.js”]