带有 Express res.download 和 BlockUI 的 Ajax 表单不起作用答案

【问题标题】：Ajax form with Express res.download and BlockUI not working带有 Express res.download 和 BlockUI 的 Ajax 表单不起作用
【发布时间】：2018-11-21 06:02:19
【问题描述】：

我用 Express 构建了一个服务器供用户上传图片，然后服务器处理图片数组并通过 res.download 响应一个 zip。

首先，我尝试发布带有提交功能的Html表单，它可以工作。

但我希望在浏览器处理数据时显示图像，所以我使用 BlockUI。

然后转到使用ajax发送表单，成功后会unblokUI，下载文件，然后转到其他页面。

现在服务器也得到了 ajax 并发送了响应，但它没有下载文件。

有人知道吗？我将不胜感激！！

HTML

<form id="form" action="url" method="post" enctype="multipart/form-data">
    <h2>upload</h2>
    <div>
        <label>User：</label>
        <input type="text" id="user" name="user" accept="text" required="required">
    </div>
    <input id="fileUpload" type="file" name="file" accept="image/*" multiple="" required="required">
    <input type="submit" value="submit" id="submit">
</form>

JavaScript

<script>
$(document).ready(function(){
    $("#form").submit(function(e) {
        e.preventDefault();
        $.blockUI({ message: '<img style="width:50%" src="img_path' });
        var form_data = new FormData($('form')[0]);
        $.ajax({
            type: 'POST',
            url: 'url',
            data: form_data,
            processData: false,
            contentType: false,

            success: function() {
                $.unblockUI();
                location.replace("url");
            }
        });

节点js

app.post('router', upload.array('file', 30),function(req, res) {　
    compressing.zip.compressDir(myfile_path).then(() => { 
        res.download(myfile)
    }
})

【问题讨论】：

标签： jquery ajax express

【解决方案1】：

这完全是工作，伙计，

表达index.js文件：

const express = require('express')
const app = express()
const port = 3000

app.post('/download', function (req, res) {
    res.download("./test.zip")
})
app.use(express.static('public'))
app.listen(port, () => console.log(`Example app listening on port ${port}!`))

test.html文件：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript">
  $(document).ready(function(){

$.ajax({
  url:"http://localhost:3000/download",
  method:"POST",
  type:"POST",
  xhrFields: {
            responseType: 'blob'
  },
  success:function(response, status, xhr){
    var fileName = xhr.getResponseHeader('Content-Disposition').split("=")[1]
    console.log(fileName)
    var a = document.createElement('a');
            var url = window.URL.createObjectURL(response);
            a.href = url;
            a.download = fileName;
            a.click();
            window.URL.revokeObjectURL(url);
  }
});

  });
</script>
</body>
</html>

将您的test.html 文件放在index.js 文件旁边的静态文件夹中。也可以下载jquery.js并放在test.html文件旁边。

【讨论】：

你好@mahradbt，对不起，我是 jquery 的新手。你的意思是我在 ajax 中测试代码成功了吗？
首先，使用postman发送请求。如果可以下载文件，请使用$.fileDownload 而不是$.ajax
您好@mahradbt，我按照您的提示通过邮递员发送请求。响应看起来不错，它返回一个 { content-type →application/zip }，并且名称也正确。所以我像这样使用 fileDownload $.fileDownload({ type: 'POST', url: 'url', data: form_data, processData: false, contentType: false, success: function() { // $.unblockUI(); } });但它没有向服务器发送请求。
等我测试一个例子
您好@mashradbt 我尝试了代码，但它显示 xhr.getResponseHeader('Content-Disposition') 为空，即使我执行 res.set("Content-Disposition", "attachment; filename" +文件名）它也显示了同样的错误