[PYTHON] Bild-Upload-Funktion mit Vue.js + Flask

Überblick

Dieses Mal erstellen wir eine Bilderkennungsanwendung, die Vue.js für das Front-End und Flask für das Back-End verwendet. Dieses Mal implementieren wir vorerst die Funktion zum Hochladen von Bildern.

Umgebung

• Docker
• Vue-cli
• flask (pipenv)

Die Umgebung wurde in der oben genannten Umgebung erstellt. Anweisungen und Details finden Sie unter den folgenden Links.

Vue + Flask on Docker

Erläuterung der wichtigsten Punkte

Vue Der folgende Code erläutert die Details.

Home.vue

//Laden Sie das Bild auf den Server hoch
    onUploadImage () {
      var params = new FormData()
      params.append('image', this.uploadedImage)
      //FormData-Konvertierungsdaten werden mit Axios an Flask gesendet.
      axios.post(`${API_URL}/classification`, params).then(function (response) {
        console.log(response)
    })

1. Das erfasste Bild wird in Base64 konvertiert. "Daten: image / jpeg: base64, ~"
2. FormData konvertiert die Daten in einer HTTP-Anforderung in ein "key: value" -Format.
3. Wenden Sie Axios an und senden Sie Daten mit der Methode '127 .0.0.1: 5000 / Klassifizierung' + POST.

Flask

Der folgende Code erläutert die Details.

app.py

@app.route('/classification', methods=['POST'])
def uploadImage():
    if request.method == 'POST':
        base64_png =  request.form['image']
        code = base64.b64decode(base64_png.split(',')[1]) 
        image_decoded = Image.open(BytesIO(code))
        image_decoded.save(Path(app.config['UPLOAD_FOLDER']) / 'image.png')
        return make_response(jsonify({'result': 'success'}))
    else: 
        return make_response(jsonify({'result': 'invalid method'}), 400)

1. "data: image / jpeg: base64, ~" ist in FormData vorhanden. Holen Sie sich den Dateinamen.
2. Holen Sie sich ein Bild mit Kissen (PIL).
3. Speichern Sie das Bild.

Gesamtbild

Vue

Home.vue

<template>
  <div>
    <div class="imgContent">
      <div class="imagePreview">
        <img :src="uploadedImage" style="width:100%;" />
      </div>
      <input type="file" class="file_input" name="photo" @change="onFileChange"  accept="image/*" />
      <button @click='onUploadImage'>Bitte beurteilen Sie das Bild ...</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

const API_URL = 'http://127.0.0.1:5000'
export default {
  data () {
    return {
      uploadedImage: ''
    }
  },
  methods: {
    //Reflektieren Sie das ausgewählte Bild
    onFileChange (e) {
      let files = e.target.files || e.dataTransfer.files
      this.createImage(files[0])
    },
    //Hochgeladene Bilder anzeigen
    createImage (file) {
      let reader = new FileReader()
      reader.onload = (e) => {
        this.uploadedImage = e.target.result
      }
      reader.readAsDataURL(file)
    },
    //Laden Sie das Bild auf den Server hoch
    onUploadImage () {
      var params = new FormData()
      params.append('image', this.uploadedImage)
      //FormData-Konvertierungsdaten werden mit Axios an Flask gesendet.
      axios.post(`${API_URL}/classification`, params).then(function (response) {
        console.log(response)
      })
    }
  }
}
</script>

Flask

Punkte, die man sich merken sollte

• Mit CORS können Ressourcen von verschiedenen Ursprüngen (Protokollen, Domänen, Ports) gemeinsam genutzt werden. --CORS ist erforderlich, wenn Sie unterschiedliche Webanwendungen haben. --Japanisch wird von app.config ['JSON_AS_ASCII'] = False unterstützt.

app.py

# render_Vorlage: Geben Sie die Vorlage an, auf die verwiesen werden soll
#jsonify: json-Ausgabe
from flask import Flask, render_template, jsonify, request, make_response

#CORS: Bibliothek für Ajax-Kommunikation
from flask_restful import Api, Resource
from flask_cors import CORS 
from random import *
from PIL import Image
from pathlib import Path
from io import BytesIO
import base64

# static_Ordner: Geben Sie den Pfad der statischen Datei an, die mit vue erstellt wurde
# template_Ordner: Index mit Vue erstellt.Geben Sie den HTML-Pfad an
app = Flask(__name__, static_folder = "./../frontend/dist/static", template_folder="./../frontend/dist")

#japanisch
app.config['JSON_AS_ASCII'] = False
#CORS=Bedingungen für die sichere Kommunikation mit Ajax
api = Api(app)
CORS(app)

UPLOAD_FOLDER = './uploads'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

#Index, wenn eine Anfrage eingeht.Siehe HTML
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def index(path):
    return render_template("index.html")

@app.route('/classification', methods=['POST'])
def uploadImage():
    if request.method == 'POST':
        base64_png =  request.form['image']
        code = base64.b64decode(base64_png.split(',')[1]) 
        image_decoded = Image.open(BytesIO(code))
        image_decoded.save(Path(app.config['UPLOAD_FOLDER']) / 'image.png')
        return make_response(jsonify({'result': 'success'}))
    else: 
        return make_response(jsonify({'result': 'invalid method'}), 400)

# app.run(host, port): Starten Sie den Flask-Server, indem Sie Host und Port angeben
if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

Zustand

So was

Es war sehr hilfreich

https://developer.mozilla.org/ja/docs/Web/HTTP/CORS POST-Bild, Gesichtserkennung, Zeichnen auf Gesicht mit Leinwand