[PYTHON] Fonction de téléchargement d'image avec Vue.js + Flask

Aperçu

Cette fois, nous allons créer une application de reconnaissance d'image qui utilise Vue.js pour le front-end et Flask pour le back-end. Pour le moment, nous implémentons cette fois la fonction de téléchargement d'images.

environnement

• Docker
• Vue-cli
• flask (pipenv)

L'environnement a été construit dans l'environnement ci-dessus. Consultez les liens ci-dessous pour obtenir des instructions et des détails.

Vue + Flask on Docker

Explication des points clés

Vue Le code suivant explique les détails.

Home.vue

//Télécharger l'image sur le serveur
    onUploadImage () {
      var params = new FormData()
      params.append('image', this.uploadedImage)
      //Les données de conversion FormData sont publiées dans Flask à l'aide d'Axios.
      axios.post(`${API_URL}/classification`, params).then(function (response) {
        console.log(response)
    })

1. L'image acquise est convertie en Base64. "Données: image / jpeg: base64, ~"
2. FormData convertit les données dans un format «clé: valeur» dans une requête HTTP.
3. Appliquez Axios et envoyez les données avec la méthode '127 .0.0.1: 5000 / classification' + POST.

Flask

Le code suivant explique les détails.

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, ~" existe dans FormData. Obtenez le nom du fichier.
2. Obtenez une image avec Oreiller (PIL).
3. Enregistrez l'image.

Vue d'ensemble

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'>Veuillez juger l'image ...</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

const API_URL = 'http://127.0.0.1:5000'
export default {
  data () {
    return {
      uploadedImage: ''
    }
  },
  methods: {
    //Refléter l'image sélectionnée
    onFileChange (e) {
      let files = e.target.files || e.dataTransfer.files
      this.createImage(files[0])
    },
    //Afficher les images téléchargées
    createImage (file) {
      let reader = new FileReader()
      reader.onload = (e) => {
        this.uploadedImage = e.target.result
      }
      reader.readAsDataURL(file)
    },
    //Télécharger l'image sur le serveur
    onUploadImage () {
      var params = new FormData()
      params.append('image', this.uploadedImage)
      //Les données de conversion FormData sont publiées dans Flask à l'aide d'Axios.
      axios.post(`${API_URL}/classification`, params).then(function (response) {
        console.log(response)
      })
    }
  }
}
</script>

Flask

Points à retenir

--CORS permet aux ressources d'être partagées par différentes origines (protocoles, domaines, ports). --CORS est requis si vous avez différentes applications Web.

• Le japonais est pris en charge par app.config ['JSON_AS_ASCII'] = False.

app.py

# render_modèle: spécifiez le modèle auquel faire référence
#jsonify: sortie json
from flask import Flask, render_template, jsonify, request, make_response

#CORS: bibliothèque pour la communication Ajax
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_dossier: spécifiez le chemin du fichier statique créé avec vue
# template_dossier: index construit avec vue.Spécifiez le chemin html
app = Flask(__name__, static_folder = "./../frontend/dist/static", template_folder="./../frontend/dist")

#Japonais
app.config['JSON_AS_ASCII'] = False
#CORS=Conditions de communication sécurisée avec Ajax
api = Api(app)
CORS(app)

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

#Index quand une demande est reçue.Voir 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): Démarrez le serveur flask en spécifiant l'hôte et le port
if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

Etat

Comme ça

C'était très utile

https://developer.mozilla.org/ja/docs/Web/HTTP/CORS Image POST, détection de visage, dessiner sur le visage avec une toile