Flask继续在函数中加载可选变量

Question

我正在尝试根据用户在选择框中选择的内容加载图像。

HTML：

<div class='image-container' id='image'>
        <h3>Index: {{ photo_index }}</h3>
        <h3>Filename: {{ image }}</h3>
        <img src="{{ url_for('images.static', filename=image) }} " id="the-photo">
</div>
<div class='button-container' id='buttons'>
   <form action="" method="post">
       <input type="hidden" name="prev-next-buttons">
       <input type="submit" value="Show prev photo" name='prev_photo'>
       <input type="submit" value="Show next photo" name='next_photo'>
       <br/>
       <input type="submit" value="Show random photo" name='random_photo'>
       <button type='button' id='rotate-button' onclick="rotateMe('#the-photo')">Rotate Photo</button>
   </form>
   <h3>Choose image from list:</h3>
   <form method="post">
       <input type="hidden" name="photo-select">
       <select id="select-image" onfocus='this.size=5;' onblur='this.size=1' onchange="this.size=1;  this.blur(); this.form.submit()">
           {% for eimage in image_list %}
               <option {% if eimage == image %} selected {% endif %}
                href = "{{ url_for('main', chosen_image=eimage) }}"
                >
                   {{eimage}}
               </option>
           {% endfor %}
       </select>
   </form>
</div>

routes.朋友

CUR_PHOTO_INDEX = 0
images = os.listdir(IMAGE_FOLDER)
image_urls = create_urls(images)
image_urls.append('favicon.ico')
num_images = len(image_urls) - 1

@app.route("/", methods=["GET", "POST"])
def main(chosen_image="Penguins.jpg"):
    # if request.method == "POST":
    global CUR_PHOTO_INDEX
    if request.method == "POST":
        if 'prev-next-buttons' in request.form:
            CUR_PHOTO_INDEX = return_index(request.form, CUR_PHOTO_INDEX)
            # print("Showing index", CUR_PHOTO_INDEX)
        elif 'photo-select' in request.form:
            CUR_PHOTO_INDEX = image_urls.index(chosen_image)
            # print("\n", indx, "\n")
            print("\n", chosen_image, CUR_PHOTO_INDEX, "\n")
    return render_template('index.html',
                           title="Local Image Viewer",
                           photo_index=CUR_PHOTO_INDEX,
                           image=image_urls[CUR_PHOTO_INDEX],
                           image_list=image_urls)

我期待发生的是，当用户从列表中选择一个选项时，它将该图像名称（字符串，eimage）发送到main()，然后在image_urls.index(chosen_image)中查找该索引。但是，每当我选择一个选项时，它只是一遍又一遍地反映“Penguins.jpg”及其索引。

我忽略了将所选图像名称发送到main()函数？

Answer 1

那是因为您没有在路线中定义查询参数。 url_for将返回一个到您的端点的URL，由于它无法通过此URL传递chosen_image的值，因此您的方法将始终使用默认值。

尝试类似的东西

@app.route("/", methods=["GET", "POST"])
@app.route("/<chosen_image>", methods=["GET", "POST"])
def main(chosen_image="Penguins.jpg"):
    # the rest of your method

Answer 2

作为@F。帕累托，问题的一部分是我没有将参数传递给app.route("/")。

第二个问题是我使用全局变量来尝试跟踪当前索引。非常感谢this Question/Answer，我已经创建了一个类来跟踪索引并可以迭代它。

HTML：

<div class='image-container' id='image'>
   <h3>Index: {{ photo_index }}</h3>
   <h3>Filename: {{ image }}</h3>
   <img src="{{ url_for('images.static', filename=image) }} " id="the-photo">
 </div>
 <div class='button-container' id='buttons'>
    <form action="" method="post">
        <input type="hidden" name="prev-next-buttons">
        <input type="submit" value="Show prev photo" name='prev-photo'>
        <input type="submit" value="Show next photo" name='next-photo'>
        <br/>
        <input type="submit" value="Show random photo" name='random-photo'>
        <button type='button' id='rotate-button' onclick="rotateMe('#the-photo')">Rotate Photo</button>
    </form>
    <h3>Choose image from list:</h3>
    <form method="post">
        <input type="hidden" name="photo-select">
        <select name="select-image" onfocus='this.size=5;' onblur='this.size=1' onchange="this.size=1;  this.blur(); this.form.submit()">
            {% for eimage in image_list %}
                <option 
                {% if eimage == image %} selected {% endif %}
                value = {{ eimage }}
                >
                    {{eimage}}
                </option>
            {% endfor %}
        </select>
    </form>
</div>

routes.朋友

images = os.listdir(IMAGE_FOLDER)
def create_urls(files):
    image_urls = []
    for file in files:
        if file.endswith(".jpg"):
            image_urls.append(file)
    return image_urls


image_urls = create_urls(images)
image_urls.append('favicon.ico')
# Subtract 2 below, so you don't include the
# favicon.ico
num_images = len(image_urls) - 2


class Photo_Index():
    def __init__(self, index=0):
        self.index = index

    def increase_number(self):
        if self.index == num_images:
            self.index = 0
        else:
            self.index = self.index + 1
        return self.index

    def decrease_number(self):
        if self.index == 0:
            self.index = num_images
        else:
            self.index = self.index - 1
        return self.index

    def random_number(self):
        self.index = random.randint(0, num_images)
        return self.index

    def set_number(self, number):
        self.index = number
        return self.index

photo_index_obj = Photo_Index()


def update_index(rqst):
    if 'prev-photo' in rqst.form:
        photo_index_obj.decrease_number()
    elif 'next-photo' in rqst.form:
        photo_index_obj.increase_number()
    elif 'random-photo' in rqst.form:
        photo_index_obj.random_number()


@app.route("/", methods=["GET", "POST"])
@app.route("/<chosen_image>", methods=["GET", "POST"])
def main(chosen_image=None):
    if request.method == "POST":
        if 'prev-next-buttons' in request.form:
            update_index(request)
        elif 'photo-select' in request.form:
            img = request.form.get("select-image")
            photo_index_obj.set_number(image_urls.index(str(img)))
        else:
            print("not a real POST")
    if request.method == "GET":
        if chosen_image is not None:
            photo_index_obj.set_number(image_urls.index(chosen_image))
    return render_template('index.html',
                           title="Local Image Viewer",
                           photo_index=photo_index_obj.index,
                           image=image_urls[photo_index_obj.index],
                           image_list=image_urls)