[JAVA] 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

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.

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

スクリーンショット 2020-07-29 18.47.42.png

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

Recommended Posts

Fonction de téléchargement d'image avec Vue.js + Flask
Téléchargement d'images et personnalisation avec django-ckeditor
Téléchargement de fichiers avec Flask + jQuery
Vue.js + Mémorandum de construction de l'environnement Flask ~ avec Anaconda3 ~
Comment télécharger avec Heroku, Flask, Python, Git (4)
Traitement d'image avec MyHDL
Reconnaissance d'image avec keras
Comment télécharger avec Heroku, Flask, Python, Git (Partie 3)
Comment télécharger avec Heroku, Flask, Python, Git (Partie 1)
[Django] Implémenter une fonction de téléchargement de fichier image qui n'utilise pas de modèle
Restriction IP avec Flask
Traitement d'image avec Python
POSTER l'image avec json et la recevoir avec flask
Bonjour le monde sur flacon
Programmation avec Python Flask
Téléchargeur d'images avec Flask
Traitement d'image avec PIL
Client de publication Twitter créé avec Flask avec une fonction de connexion simple
[Avec diagramme d'image] Nginx + gunicorn + Flask converti en Docker [Partie 2]
[Avec diagramme d'image] Nginx + gunicorn + Flask converti en Docker [Partie 1]
Téléchargement d'image avec l'API Flickr
Essayez l'optimisation des fonctions avec Optuna
Implémenter la fonction de connexion avec django-allauth
Lire les coordonnées de l'image avec Python-matplotlib
Traitement d'image avec PIL (Pillow)
Touch Flask + courir avec Heroku
Bonjour le monde avec Flask + Hamlish
Fonction sinueuse approximative avec TensorFlow
Édition d'image avec python OpenCV
Test unitaire du flacon avec pytest
API avec Flask + uWSGI + Nginx
Développement d'applications Web avec Flask
Tri des fichiers image avec Python (3)
Créer une visionneuse d'images avec Tkinter
Tri des fichiers image avec Python
Génération de légende d'image avec Chainer
Voir la couverture du flacon avec pytest-cov
Obtenez des fonctionnalités d'image avec OpenCV
Zura avec fonction softmax implémentée
Framework Django REST avec Vue.js
Télécharger plusieurs fichiers avec Flask
Reconnaissance d'image avec Keras + OpenCV
[Python] Traitement d'image avec scicit-image
[Python] J'ai créé une visionneuse d'images avec une fonction de tri simple.
Importation et téléchargement d'images sur le stockage Azure. Avec Python + requêtes + API REST
J'ai essayé de créer une fonction de similitude d'image avec Python + OpenCV