Как показывать изображения на веб-страницах с помощью Ajax во Flask? - PullRequest
Новая
       23

Как показывать изображения на веб-страницах с помощью Ajax во Flask?

0 голосов
/ 24 мая 2018

Я новичок в Python Flask.Хотя я выполнял эту задачу несколько раз в PHP / Java, я как-то застрял здесь.

Моя задача - загрузить изображение на сервер, затем отобразить изображение на веб-странице, выполнить некоторую обработку изображения иснова отобразите обработанное изображение на клиентском компьютере.

Для этого я использую код в flask-fileupload-ajax-example на Github.Я могу правильно показать имя файла и его размер, используя ajax на веб-странице.Но почему-то, когда я пытаюсь установить тег src из <img> по пути загруженных изображений, он дает 404, File not found error.

Ниже приведены соответствующие фрагменты кода.

В app.py

@app.route('/uploadajax', methods=['POST', 'GET'])
def upldfile():
    if request.method == 'POST':
        files = request.files['file']
        print(files)
        if files and allowed_file(files.filename):
            filename = secure_filename(files.filename)
            app.logger.info('FileName: ' + filename)
            print('FileName: ' + filename)
            updir = os.path.join(basedir, 'upload/')
            files.save(os.path.join(updir, filename))
            file_size = os.path.getsize(os.path.join(updir, filename))
            file_path = '/'.join(['upload', filename])
            return jsonify(name=filename, path=file_path, size=file_size)

В app.js файле: 

$('#submit').click(function() {
    event.preventDefault();
    var form_data = new FormData($('#uploadform')[0]);
    $.ajax({
        type: 'POST',
        url: '/uploadajax',
        data: form_data,
        contentType: false,
        processData: false,
        dataType: 'json'
    }).done(function(data, textStatus, jqXHR){
        console.log(data);
        console.log(textStatus);
        console.log(jqXHR);
        console.log('Success!');
        $("#resultFilename").text(data['name']); // name of the file
        $("#resultFilesize").text(data['size']); // size of the file
        //my_url = "{{ url_for('upload', filename="+data['name']+" }}";
        $("#image").attr('src', data['path']); // setting the src attribute of img tag
        $("#adv-btn").attr('value', data['name']);
        $("#adv-btn").show();
        //get_image(data['name'])
    }).fail(function(data){
        alert('error!');
    });
});

Я также пытался использовать url_for, но он не обрабатывается.Любое предложение будет высоко оценено.Спасибо.

1 Ответ

0 голосов
/ 24 мая 2018

Попробуйте что-то вроде этого. Создайте папку с именем static в корневом каталоге вашего приложения и переместите туда папку для загрузки.

Затем определите свое приложение следующим образом 

app = Flask(__name__, static_url_path="/static", static_folder="static")
app.config["UPLOAD_FOLDER"] = "/root_flask_app/static/upload/"

Затем внутри app.py попробуйте: 

updir = app.config["UPLOAD_FOLDER"]

и внутри app.js: 

$("#image").attr('src', '/static/'+data['path']);
...