如何使用 Fetch API 在服務器上上傳文件

上傳文件是當今 Web 應用程序中最常見的功能之一。有很多可用的 JavaScript 庫可以輕而易舉地處理文件上傳。

但是，我們不要僅僅為了這個可以使用 Fetch API 在本機 JavaScript 中輕鬆處理的單一功能而加載整個庫。 Fetch 是基於 Promise 的 XHR 的現代替代品，用於在瀏覽器中發出 HTTP 請求。

獲取文件上傳

讓我們將以下 HTML 輸入元素添加到您的網站：

<input type="file" id="avatar">

現在在輸入上添加一個事件監聽器，當用戶選擇一個文件時將觸發它：

// select file input
const input = document.getElementById('avatar');

// add event listener
input.addEventListener('change', () => {
    uploadFile(input.files[0]);
});

接下來，添加 uploadFile() 接收 File 的方法 對像作為輸入並使用 fetch() 將其上傳到服務器 使用 FormData 接口：

const uploadFile = (file) => {

    // add file to FormData object
    const fd = new FormData();
    fd.append('avatar', file);

    // send `POST` request
    fetch('/upload-avatar', {
        method: 'POST',
        body: fd
    })
    .then(res => res.json())
    .then(json => console.log(json))
    .catch(err => console.error(err));
}

驗證文件類型和大小

您還可以在開始上傳到服務器之前驗證文件的屬性（如文件類型和文件大小）：

const uploadFile = (file) => {

    // check file type
    if(!['image/jpeg', 'image/gif', 'image/png', 'image/svg+xml'].includes(file.type)) {
        console.log('Only images are allowed.');
        return;
    }

    // check file size (< 2MB)
    if(file.size > 2 * 1024 * 1024) {
        console.log('File must be less than 2MB.');
        return;
    }

    // ...
}

使用 Node.js 在服務器端處理文件上傳

這是一個在 Node.js 中處理上述文件上傳請求的示例代碼。我正在使用 express-fileupload — 一個用於上傳文件的簡單 Express 中間件。它解析 multipart/form-data requests , 提取文件（如果可用），並使其在 req.files 下可用 屬性：

app.post('/upload-avatar', async (req, res) => {
    try {
        if(!req.files) {
            res.send({
                status: false,
                message: 'No file uploaded'
            });
        } else {
            //Use the name of the input field (i.e. "avatar") to retrieve the uploaded file
            let avatar = req.files.avatar;
            
            //Use the mv() method to place the file in upload directory (i.e. "uploads")
            avatar.mv('./uploads/' + avatar.name);

            //send response
            res.send({
                status: true,
                message: 'File is uploaded',
                data: {
                    name: avatar.name,
                    mimetype: avatar.mimetype,
                    size: avatar.size
                }
            });
        }
    } catch (err) {
        res.status(500).send(err);
    }
});

使用 Spring Boot 在服務器端處理文件上傳

如果你打算使用 Spring Boot 做後端，下面是一個在 Spring Boot 中處理上述文件上傳請求的示例代碼片段：

@PostMapping("/upload-avatar")
@ResponseBody
public ResponseEntity<String> fileUpload(MultipartFile avatar) {
    try {

        // upload directory - change it to your own
        String UPLOAD_DIR = "/opt/uploads";

        // create a path from file name
        Path path = Paths.get(UPLOAD_DIR, avatar.getOriginalFilename());

        // save the file to `UPLOAD_DIR`
        // make sure you have permission to write
        Files.write(path, avatar.getBytes());
    }
    catch (Exception ex) {
        ex.printStackTrace();
        return new ResponseEntity<>("Invalid file format!!", HttpStatus.BAD_REQUEST);
    }

    return new ResponseEntity<>("File uploaded!!", HttpStatus.OK);
}