Форма Ajax с Express res.download и BlockUI не работает - PullRequest
Новая
       1

Форма Ajax с Express res.download и BlockUI не работает

0 голосов
/ 21 ноября 2018

Я создаю сервер с Express для пользователя, чтобы загружать изображения, затем сервер обрабатывает массив изображений и отправляет zip с помощью res.download.

Сначала я пытаюсь опубликовать 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)
    }
})

1 Ответ

0 голосов
/ 21 ноября 2018

это полностью рабочий чувак,

экспресс 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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...