使用最小 WEB API 实现文件上传会遇到的坑

使用最小 WEB API 实现文件上传可能会遇到以下几个问题：

没有文件上传的权限
文件大小限制
WEB API 跨域问题
上传进度条显示
文件上传成功后的处理

为了解决以上问题，可以按照以下步骤进行操作：

配置服务器端文件上传权限
- 首先需要查看服务器是否允许文件上传，若未允许需要更改配置文件。
- 对于 Nginx，需在 nginx.conf 中添加以下内容，设置上传路径和文件大小限制：
server { listen 80; server_name localhost; client_max_body_size 20m; # 允许上传文件的最大大小 location /upload { alias /home/user/upload; # 设置上传路径 client_body_temp_path /var/nginx/client_temp; client_body_in_file_only on; client_body_buffer_size 32K; keepalive_timeout 30s; } ... }
2. 编写前端代码
- 在 HTML 中添加一个 form 表单，设置 enctype 属性，使其能够上传文件。
- 在表单中添加一个 input 标签，type 为 file，name 为 file。
- 监听表单提交事件，在事件处理函数中使用 XMLHttpRequest 对象发送 POST 请求，FormData 对象中添加上传的文件，发送请求给服务器。

```html

```
处理跨域问题
- 如果服务端和客户端不在同一个域名下，需要使用 CORS 协议处理跨域问题。
- 在服务器端设置 Access-Control-Allow-Origin 响应头，允许来自不同域名的请求。
res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allow-Methods', 'POST'); res.setHeader('Access-Control-Max-Age', '86400');
上传进度条显示
- 可以使用 XHR 的 onprogress 事件监听上传进度。
- 在事件处理函数中获取上传进度，更新进度条的显示状态。
javascript xhr.upload.onprogress = function(event) { const progress = event.loaded / event.total * 100; // 更新进度条显示状态 };
文件上传成功后的处理
- 可以在服务器端将上传的文件保存到指定的路径下。
- 向客户端返回上传结果，例如上传成功或上传失败。
javascript formData.parse(req, function(err, fields, files) { if (err) { // 上传失败 res.status(500); res.send('上传失败'); } else { // 将文件保存到指定路径下 const newPath = '/home/user/upload/' + files.file.name; fs.rename(files.file.path, newPath, function() { // 上传成功 res.status(200); res.send('上传成功'); }); } });

示例一:

客户端代码：

<!DOCTYPE html>
<html>
<head>
    <title>文件上传</title>
</head>
<body>
    <form id="upload-form" enctype="multipart/form-data">
        <input type="file" name="file"/>
        <input type="submit" value="上传"/>
    </form>
    <script>
    const form = document.querySelector('#upload-form');
    form.addEventListener('submit', function(event) {
        event.preventDefault();
        const xhr = new XMLHttpRequest();
        const formData = new FormData(event.target);
        xhr.open('POST', 'http://localhost:8000/upload');
        xhr.upload.onprogress = function(event) {
            const progress = event.loaded / event.total * 100;
            console.log(progress);
        };
        xhr.onload = function(event) {
            console.log('上传成功');
        };
        xhr.send(formData);
    });
    </script>
</body>
</html>

服务端代码：

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });

app.set('port', process.env.PORT || 8000);

app.post('/upload', upload.single('file'), function(req, res, next) {
    const file = req.file;
    if (!file) {
        res.status(400);
        res.send('请选择上传文件');
    }
    const newPath = '/home/user/upload/' + file.originalname;
    fs.rename(file.path, newPath, function() {
        res.setHeader('Access-Control-Allow-Origin', '*');
        res.status(200);
        res.send('上传成功');
    });
});

app.listen(app.get('port'), function() {
    console.log('服务器运行在 http://localhost:' + app.get('port') + '/');
});

示例二:

客户端代码：

<!DOCTYPE html>
<html>
<head>
    <title>文件上传</title>
</head>
<body>
    <input id="file-input" type="file"/>
    <button id="upload-btn">上传</button>
    <script>
    const fileInput = document.querySelector('#file-input');
    const uploadBtn = document.querySelector('#upload-btn');
    uploadBtn.addEventListener('click', function() {
        const xhr = new XMLHttpRequest();
        const formData = new FormData();
        const file = fileInput.files[0];
        if (!file) {
            console.log('请选择上传文件');
            return;
        }
        formData.append('file', file);
        xhr.open('POST', 'http://localhost:8000/upload');
        xhr.upload.onprogress = function(event) {
            const progress = event.loaded / event.total * 100;
            console.log(progress);
        };
        xhr.onload = function(event) {
            console.log('上传成功');
        };
        xhr.send(formData);
    });
    </script>
</body>
</html>

服务端代码：

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });

app.set('port', process.env.PORT || 8000);

app.post('/upload', upload.single('file'), function(req, res, next) {
    const file = req.file;
    if (!file) {
        res.status(400);
        res.send('请选择上传文件');
    }
    const newPath = '/home/user/upload/' + file.originalname;
    fs.rename(file.path, newPath, function() {
        res.setHeader('Access-Control-Allow-Origin', '*');
        res.status(200);
        res.send('上传成功');
    });
});

app.listen(app.get('port'), function() {
    console.log('服务器运行在 http://localhost:' + app.get('port') + '/');
});

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用最小 WEB API 实现文件上传会遇到的坑 - Python技术站

使用最小 WEB API 实现文件上传会遇到的坑

相关文章