ajax 上传文件和数据库

Ajax 上传文件和数据库

一、Ajax 上传文件

1、创建 HTML 表单：在前端页面创建一个包含文件输入框和上传按钮的表单，同时可以添加其他需要一同上传的数据字段。

2、使用 FormData 对象：在 JavaScript 中，使用FormData 对象来收集表单中的数据和文件，当用户点击上传按钮时，将文件和其他数据添加到FormData 实例中。

获取文件输入框和上传按钮的元素：

        var fileInput = document.querySelector('input[type="file"]');
        var uploadBtn = document.getElementById('uploadBtn');

为上传按钮添加点击事件监听器，在点击时执行以下操作：

        uploadBtn.addEventListener('click', function() {
            var formData = new FormData();
            // 添加文件到 formData
            formData.append('file', fileInput.files[0]);
            // 添加其他数据到 formData
            formData.append('data1', '示例数据1');
            // 发送 Ajax 请求
            uploadFile(formData);
        });

3、发送 Ajax 请求：使用XMLHttpRequest 或fetch API 发送 Ajax 请求，将FormData 对象作为请求体发送到服务器端的指定接口，以fetch API 为例：

    function uploadFile(formData) {
        fetch('服务器端上传接口地址', {
            method: 'POST',
            body: formData,
            // 必须设置这两个请求头，否则可能无法正确上传文件
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        })
        .then(response => response.json())
        .then(data => {
            console.log('上传成功：', data);
            // 在这里可以根据服务器返回的数据进行相应的处理，如更新页面显示等
        })
        .catch(error => {
            console.error('上传失败：', error);
        });
    }

二、与数据库交互

1、服务器端接收文件和数据：在服务器端，根据所使用的编程语言和框架，编写相应的代码来接收上传的文件和表单数据，以 Node.js 和 Express 为例，可以使用multer 中间件来处理文件上传：

首先安装multer：

        npm install multer

然后在服务器端代码中配置和使用multer：

        const express = require('express');
        const multer = require('multer');
        const app = express();
        const upload = multer({ dest: 'uploads/' }); // 设置文件存储路径
        app.post('/upload', upload.single('file'), (req, res) => {
            // req.file 是上传的文件信息，req.body 是其他表单数据
            console.log(req.file);
            console.log(req.body);
            // 在这里可以将文件信息和其他数据保存到数据库中
            res.json({ message: '文件上传成功' });
        });
        app.listen(3000, () => {
            console.log('服务器运行在 http://localhost:3000');
        });

2、保存文件信息和数据到数据库：在接收到文件和数据后，将其保存到数据库中，这涉及到数据库连接和操作，具体的实现方式取决于所使用的数据库类型（如 MySQL、MongoDB 等）和相应的数据库驱动或 ORM 框架，以 MongoDB 为例，使用mongoose 库可以将文件信息和数据保存到 MongoDB 数据库中：

首先连接到 MongoDB 数据库：

        const mongoose = require('mongoose');
        mongoose.connect('mongodb://localhost:27017/mydatabase', { useNewUrlParser: true, useUnifiedTopology: true });

定义一个 Schema 来描述要保存的数据结构，

        const fileSchema = new mongoose.Schema({
            filename: String,
            originalname: String,
            mimetype: String,
            size: Number,
            path: String,
            otherData: String // 对应表单中的其他数据字段
        });
        const File = mongoose.model('File', fileSchema);

在接收到上传的文件和数据后，创建一个File 文档并保存到数据库中：

        app.post('/upload', upload.single('file'), (req, res) => {
            const fileDocument = new File({
                filename: req.file.filename,
                originalname: req.file.originalname,
                mimetype: req.file.mimetype,
                size: req.file.size,
                path: req.file.path,
                otherData: req.body.data1
            });
            fileDocument.save()
                .then(() => {
                    res.json({ message: '文件信息保存成功' });
                })
                .catch(error => {
                    console.error('保存文件信息失败：', error);
                    res.status(500).json({ message: '保存文件信息失败' });
                });
        });

三、相关问题与解答

1、问题：为什么在发送 Ajax 请求上传文件时，需要将contentType 设置为false？

解答：在使用FormData 对象上传文件时，如果将contentType 设置为application/x-www-form-urlencoded 或其他默认值，会导致文件数据无法正确传输，因为FormData 对象会自动将数据编码为multipart/form-data 格式，而这种格式需要正确的边界和内容类型头部来分隔不同的数据部分，将contentType 设置为false 可以阻止浏览器自动设置contentType 头部，让FormData 对象自行处理数据的编码和传输，确保文件能够正确上传。

2、问题：如何处理大文件上传时的进度显示？

解答：可以通过监听XMLHttpRequest 对象的progress 事件来获取上传进度信息，并在页面上显示进度条，以下是一个简单的示例代码：

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '服务器端上传接口地址', true);
    xhr.upload.onprogress = function(event) {
        if (event.lengthComputable) {
            var percentComplete = (event.loaded / event.total)  100;
            console.log('上传进度：' + percentComplete + '%');
            // 在这里可以更新页面上的进度条显示
        }
    };
    xhr.send(formData);