Flask 实现简单的图片上传工具

1. Introduction

Images play a crucial role in many web applications. It is often required to implement a feature that allows users to upload images. In this article, we will explore how to implement a simple image upload tool using Flask, a popular web framework for Python.

2. Setting up Flask

The first step is to set up a Flask project. We need to install Flask using pip, the package installer for Python:

pip install Flask

Once Flask is installed, we can create the main application file, usually called app.py. In this file, we need to import the Flask module and create an instance of the Flask class:

from flask import Flask

app = Flask(__name__)

Now, let's create a route that will handle the image upload:

@app.route('/upload', methods=['POST'])

def upload_image():
    # Upload logic will be implemented here
    pass

3. HTML Form

In order to upload images, we need to create an HTML form that allows users to select a file and submit it to the server. We can create a new route in app.py that renders an HTML template containing the form:

@app.route('/', methods=['GET'])

def index():
    return render_template('upload.html')

The upload.html template needs to contain a form with an input field of type "file" and a submit button:

<form action="/upload" method="POST" enctype="multipart/form-data">

  <input type="file" name="image" accept="image/*" required>
  <button type="submit">Upload</button>
</form>

Upon submitting the form, the file will be sent to the upload_image() function in app.py.

4. Handling the Image Upload

When the image is uploaded, it will be sent as a file object within the request. We can access this file using the request.files attribute. Let's modify the upload_image() function to handle the image upload:

import os

UPLOAD_FOLDER = 'uploads'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
@app.route('/upload', methods=['POST'])
def upload_image():
    file = request.files['image']
    filename = secure_filename(file.filename)
    file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
    return 'Image uploaded successfully'

In the code above, we first access the uploaded file using request.files['image']. We then secure the filename using the secure_filename() function from the Werkzeug module to prevent any potential security issues. Finally, we save the file to a specified folder using file.save().

4.1 Multiple Image Uploads

If we want to allow users to upload multiple images at once, we can modify the HTML form to accept multiple files:

<input type="file" name="image" accept="image/*" required multiple>

In the upload_image() function, we can then iterate over the uploaded files and save each one:

if 'image' in request.files:

    images = request.files.getlist('image')
    for image in images:
        filename = secure_filename(image.filename)
        image.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))

5. Displaying Uploaded Images

After the images are uploaded, we can display them on a web page. Let's create a new route in app.py that renders an HTML template to display the uploaded images:

@app.route('/images', methods=['GET'])

def display_images():
    images = os.listdir(app.config['UPLOAD_FOLDER'])
    return render_template('images.html', images=images)

In the template images.html, we can use the Jinja2 templating language to loop over the list of images and display them:

<h2>Uploaded Images</h2>

{% for image in images %}
    <img src="/uploads/{{ image }}" alt="{{ image }}">
{% endfor %}

5.1 Styling the Image Display

To make the image display more visually appealing, we can apply some CSS styles to the images:

<style>

    img {
        max-width: 300px;
        margin: 10px;
    }
</style>

This will set a maximum width of 300 pixels for each image and add a margin of 10 pixels around each image.

6. Conclusion

In this article, we have learned how to implement a simple image upload tool using Flask. We started by setting up a Flask project and creating a route to handle the image upload. We then created an HTML form to allow users to select and upload images. Next, we modified the backend code to handle the image upload and save the uploaded files. Finally, we displayed the uploaded images on a web page using an HTML template and added some styling to enhance the image display.

With this basic understanding, you can further explore Flask and extend the image upload tool to fit your specific requirements.