Nodejs中ajax上传文件是怎么实现的

Nodejs中ajax上传文件是怎么实现的

想用jquery发送请求到服务器，但是不知道选择文件之后，该用怎么样数据方式传送过去。看到jquery里面写的文件格式只有xml,html,json,jsonp,text等，其他的文件是要专程这些格式才可以的么，那么怎么去转呢，然后$.ajax{}该怎么去写，搜到的尽是form表单。貌似论坛的markdown上传图片中的是新创建了一个form表单，然后将file以post的方式交由upload.js处理的。有没有可能像这样的格式利用ajax上传，然后服务器返回文件存储的地址

<input type = “file” name = “image_upload”>

然后js来发送请求？


13 回复

Nodejs中Ajax上传文件是怎么实现的

在Web开发中，使用Ajax上传文件是一个常见的需求，尤其是在需要实时反馈或动态更新用户界面的情况下。尽管jQuery中的$.ajax()方法默认不支持直接上传二进制文件（如图片、视频等），但可以通过一些额外的配置来实现这一功能。

前端实现

首先，我们需要一个HTML表单来让用户选择文件：

<input type="file" id="fileInput" />

接下来，我们使用JavaScript（可以是原生JS或jQuery）来发送文件。这里使用jQuery的FormData对象来封装文件数据，并通过Ajax请求发送给服务器。

$(document).ready(function() {
    $('#fileInput').on('change', function() {
        var file = this.files[0];
        var formData = new FormData();
        formData.append('file', file);

        $.ajax({
            url: '/upload',
            type: 'POST',
            data: formData,
            processData: false, // 防止jQuery处理数据
            contentType: false, // 防止jQuery设置contentType
            success: function(response) {
                console.log('File uploaded successfully:', response);
            },
            error: function(error) {
                console.error('Error uploading file:', error);
            }
        });
    });
});

后端实现

在Node.js中，我们可以使用Express框架配合multer中间件来处理文件上传。首先安装必要的依赖：

npm install express multer

然后编写服务器端的代码来接收并保存文件：

const express = require('express');
const multer = require('multer');

const app = express();

// 设置Multer的存储策略
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/') // 指定文件保存目录
    },
    filename: function (req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now()) // 使用时间戳作为文件名
    }
});

const upload = multer({ storage: storage });

app.post('/upload', upload.single('file'), function (req, res, next) {
    if (!req.file) {
        return res.status(400).send('No file uploaded.');
    }
    res.send(`File uploaded successfully. File location: ${req.file.path}`);
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

在这个例子中，我们定义了一个简单的文件上传路由/upload，当接收到POST请求时，Multer会自动解析上传的文件，并将其保存到指定目录。服务器返回文件的保存路径作为响应。

通过这种方式，你可以使用Ajax来上传文件，并在服务器端进行相应的处理。


我用javascript做了一个简单的文件上传，看能否对你有帮助。

var xhr = new XMLHttpRequest();
        xhr.addEventListener('progress', function(){
            console.log('progress');
        }, false);
        xhr.addEventListener('load', function(){
            console.log('load');
        }, false);
        xhr.open('post', '/upload', true);///upload为文件上传的接口

    var fd = new FormData();
    fd.append('upfile', photo.data.file);
    fd.append('money', money);
    fd.append('source', source);
    fd.append('filename', photo.data.name);

    xhr.send(fd);

jQuery方式好像有提供一个叫$.ajaxFileUpload的方式 上传可以google一下。

可以使用jquery.form 这个jquery插件

这个是文件内容是哪里传过去的哈，FormData是怎么去定义的？

那就是一定要使用form才可以提交？

单纯的用AJAX上传文件貌似只有HTML5才能支持，如果要支持所有的浏览器有两种办法，一是用iframe提交form，另外就是用flash，jQuery的ajaxFileUpload用的是flash，不过它用flash和js交互的方式获取了上传进度，效果还是不错的

关键问题不在于form，只要你能把数据按照HTTP协议的格式组装就OK，但目前来说任何方式最终都还是实现了一个form，把数据封装了。

HTML5貌似实现了ajax上传文件, 否则ajax是不能上传文件的, 目前所谓的ajax文件上传无非就是iframe/flash, 因为xhr没有multipart

嗯嗯，嘗試了下base64,還不錯

要的就是這個form

嗯嗯，發現了，所以一般還是得靠form

这个这个，真的可行吗。我在想可不可以把filename = /etc/passwd呢？

使用AJAX上传文件在Node.js中可以通过FormData对象和XMLHttpRequest来实现。这里提供一个简单的示例，展示如何通过jQuery的$.ajax方法来实现文件上传。

客户端代码（HTML + JavaScript）

首先，在前端页面中添加一个文件输入框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX File Upload Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<input type="file" id="fileInput" />

<button id="uploadButton">Upload</button>

<script>
    $(document).ready(function() {
        $('#uploadButton').click(function() {
            var fileInput = document.getElementById('fileInput');
            var file = fileInput.files[0];
            
            var formData = new FormData();
            formData.append('file', file);

            $.ajax({
                url: '/upload',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    console.log('File uploaded successfully:', response);
                },
                error: function(error) {
                    console.error('Error uploading file:', error);
                }
            });
        });
    });
</script>

</body>
</html>

服务器端代码（Node.js）

接下来，在Node.js后端设置路由处理文件上传：

const express = require('express');
const multer = require('multer');

const app = express();

// 配置Multer用于文件上传
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './uploads/') // 文件保存路径
    },
    filename: function (req, file, cb) {
        cb(null, file.originalname) // 文件名
    }
});

const upload = multer({ storage });

app.post('/upload', upload.single('file'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('No file uploaded.');
    }

    // 返回文件存储地址
    const fileUrl = `http://localhost:3000/uploads/${req.file.filename}`;
    res.json({ message: 'File uploaded successfully', fileUrl });
});

app.listen(3000, () => {
    console.log('Server started on http://localhost:3000');
});

总结

这段代码展示了如何使用jQuery和Multer库在Node.js环境中进行文件上传。前端使用FormData对象来封装文件，通过Ajax发送给后端；后端使用Multer处理文件上传并将其保存到指定目录，最后返回文件的存储路径。

回到顶部