上传文件，主要是ajax方式

wp231957 · 发表于 2021-7-2 16:38:27

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

let express = require('express');
let http = require('http');
let fs = require('fs');
let path = require("path");
let multer = require("multer");

let app = express();
let upload = multer({
    dest: "upload" //上传文件存放路径
});

app.use(express.static(path.join(__dirname, 'upload')));

let singleMidle = upload.single("singleFile"); //一次处理一张
let singleMidle2 = upload.single("sigfile"); //一次处理一张
let arrMidle = upload.array("arrayFile", 5); //一次最多处理5张
let arrMidle2 = upload.array("mulfile", 5); //一次最多处理5张
app.post("/multer/singup", singleMidle, function(req, res) {
    res.send(req.file);
});
app.post('/multer/arrup', arrMidle, function(req, res) {
    console.log(req.files);
    res.send(req.files);
});
app.post('/ajaxupload', arrMidle2, function(req, res) {
    console.log(req.files);
    res.send(req.files);
});
app.post('/ajaxsigupload', singleMidle2, function(req, res) {
    console.log(req.file);
    res.send(req.file);
});
app.get('/', function(req, res) {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    url2 = "./testip.html";
    fs.readFile(url2, 'utf-8', function(err, data) {
        if (err) {
            throw err;
        }
        res.end(data);
    });
})

app.all('*', function(req, res, next) {　　
    res.header("Access-Control-Allow-Origin", "*");　　
    res.header('Access-Control-Allow-Headers', '*');　　
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS,PATCH");　　
    next();
});
app.listen(3000);
console.log("请使用http://localhost:3000/访问主页，或者http://127.0.0.1:3000/访问主页");

wp231957 · 发表于 2021-7-2 16:38:57

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title>文件上传演示案例</title>
</head>

<body>
    <form class="" action="/multer/singup" method="post" enctype="multipart/form-data">
        <!--enctype="multipart/form-data"表示不会对数据本身编码，multer只处理enctype="multipart/form-data"的表单数据-->
        <input type="file" name="singleFile" value="">
        <input type="submit" name="" value="单一文件上传">
    </form>

    <form class="" action="/multer/arrup" method="post" enctype="multipart/form-data">
        <input type="file" name="arrayFile" value="" multiple>
        <!--multiple 可上传多张  -->
        <input type="submit" name="" value="多文件上传">
    </form>
    <form id="sig" enctype="multipart/form-data">
        <input type="file" name="sigfile" value="">
        <input type="button" id="ajaxsigupload" value="AJAX单文件上传">
    </form>
    <form id="mul" enctype="multipart/form-data">
        <input type="file" name="mulfile" value="" multiple>
        <input type="button" id="ajaxupload" value="AJAX多文件上传">
    </form>
    <img src="upload/3.png" />
    <script>
        $('#ajaxupload').on('click', function() {
            var type = "file";
            var formData = new FormData($("#mul")[0]); //这里需要实例化一个FormData来进行文件上传
            //console.log(formData);
            $.ajax({
                type: "post",
                url: "/ajaxupload",
                data: formData,
                processData: false,
                contentType: false,
                success: function(hdata) {
                    if (hdata) {
                        var i;
                        for (i = 0; i < hdata.length; i++) {
                            document.write("<img src=" + hdata[i]["path"] + "/>");
                        }
                    } else {
                        console.log("失败了");
                    }
                },
                error: function(data, XMLHttpRequest, textStatus, errorThrown) {
                    console.log(data);
                    console.log(XMLHttpRequest.status);
                    console.log(XMLHttpRequest.readyState);
                    console.log(textStatus);
                }
            });
        });
        $('#ajaxsigupload').on('click', function() {
            var type = "file";
            var formData = new FormData($("#sig")[0]); //这里需要实例化一个FormData来进行文件上传
            console.log(formData);
            $.ajax({
                type: "post",
                url: "/ajaxsigupload",
                data: formData,
                processData: false,
                contentType: false,
                success: function(hdata) {
                    if (hdata) {
                        console.log(hdata);
                    } else {
                        console.log("失败了");
                    }
                },
                error: function(data, XMLHttpRequest, textStatus, errorThrown) {
                    console.log(data);
                    console.log(XMLHttpRequest.status);
                    console.log(XMLHttpRequest.readyState);
                    console.log(textStatus);
                }
            });
        });
    </script>
</body>

</html>

wp231957 · 发表于 2021-7-2 19:50:50

更改一个致命的代码
app.use('/upload', express.static(__dirname + '/upload'));

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 上传文件，主要是ajax方式

马上注册，结交更多好友，享用更多功能^_^