Скачать файл с сервера с Flask и JS - PullRequest
Новая
       108

Скачать файл с сервера с Flask и JS

1 голос
/ 19 июня 2020

Я пытаюсь загрузить файл, когда пользователь нажимает определенную кнопку. Этот файл представляет собой изображение, которое создается при нажатии указанной кнопки. Я хочу, чтобы изображение автоматически загружалось на клиентское устройство.

Я использую Flask в коде сервера, и в идеале функция send_file из Flask должна запускать эту автоматическую загрузку, поскольку она добавляет заголовок Content-Disposition.

На стороне клиента у меня есть код JS, который использует API-интерфейс fetch для отправки POST-запроса на сервер с некоторыми данными, которые используются для создания изображения, которое необходимо загрузить.

Это код JS: 

function make_image(text){
    const json={
        text: text
    };
    const options={
        method: "POST",
        body: JSON.stringify(json),
        headers:{
            'Content-Type':'application/json',
        }
    };

    fetch('/image',options)
        .then(res=>{
            res.json(); //Gives an error: Uncaught (in promise) SyntaxError: Unexpected token � in JSON at position 0
        }).catch(err=>console.log(err));
}

А это код Python на сервере: 

@app.route('/image',methods=['POST'])
def generate_image():
    cont = request.get_json()
    t=cont['text']
    print(cont['text'])
    name = pic.create_image(t)
    time.sleep(2)
    return send_file(f"{name}.png",as_attachment=True,mimetype="image/png")

Но ничего не происходит. Изображение не загружается. Однако образ создается на сервере и не поврежден

Как мне решить эту проблему? И есть ли другой способ сделать то, что я пытаюсь сделать?

Ответы [ 2 ]

0 голосов
/ 20 июня 2020

Поскольку @clockwatcher упомянул другой вопрос , я использовал модуль download.js для обработки загрузки изображения.

Итак, мой код JS теперь выглядит так: 

function make_image(text){
    const json={
        text: text
    };
    const options={
        method: "POST",
        body: JSON.stringify(json),
        headers:{
            'Content-Type':'application/json',
        }
    };

    fetch('/image',options)
        .then(res=>{
            return res.blob();
        }).then(blob=>{
            download(blob)
        }).catch(err=>console.log(err));
}

И добавление к тегу скрипта в html:

<script src="https://cdnjs.cloudflare.com/ajax/libs/downloadjs/1.4.8/download.min.js"></script>

Без изменений в коде сервера Python.

Работает

0 голосов
/ 19 июня 2020

Вы можете сделать следующее 

return send_from_directory(dir, file_name, as_attachment=True)

Это загрузит файл на машину пользователя.

Изменить:

Кстати, если вы создаете форму html, как показано ниже, вам не нужно javascript. 

<form action='action here' method='post'>
    <input type='submit'>
</form>
...