Question

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

首先，我尝试使用Html表单提交带有提交功能的表单，它可以正常工作。

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

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

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

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

HTML

get { return _AllPrintingFormats }
set 
{ 
    _AllPrintingFormats = value; 
    OnPropertyChanged("PrintingFormats"); 
}

JavaScript

PrintingFormats

节点js

<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>

Answer 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文件旁边。

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

1 个答案: