概述
1.flask提供接口，axios调用接口得到数据，vue将数据渲染到页面上。
2.存在问题：跨域请求的报错；解析json数据的问题。
vue+axios
首先，创建好一个vue项目。（这个网上资源很多），然后在项目的目录下用命令行导入axios
npm install axios
然后，在你vue项目下的main.js配置好axios.
import axios from 'axios' Vue.prototype.$axios = axios
我的src目录是这样的，创建一个class.vue的组件，与flask的交互就是在这里面的。当然，要在router里面配置好路由，在app里面渲染出来。
这是路由，class的路径就是加入进去的class.vue的路由。
import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') }, { path: '/class', name: 'class', component: () => import(/* webpackChunkName: "about" */ '../views/class.vue') } ] const router = new VueRouter({ routes }) export default router
app里随便配置一下。这样你的组件就能渲染出来。
<div id="app"> <router-view/> </div>
基本配置就算好了，下面就是组件里的实现了。
一个form表单，这是效果图，getdata里的数据是设置好的，等到文件上传后，后台返回的结果会更新这些数据。
<form enctype=multipart/form-data> <p></p> <input type="file" @change="getFile($event)"> <button @click="submitForm($event)">提交</button> </form></a-layout-content> <a-layout-sider> <p></p> <span>{{getdata.classify}}</span> <p></p> <span>{{getdata.state}}</span> <p></p> <span>{{getdata.type}}</span>
下面是calss.vue的script，data里就是预先随便设置的数据，methods里面用来存放方法。主要看这里，axios.post一个表单数据（里面是图片），到指定的url,这里就是flask提供的接口。我们通过var msg = response.data
that.getdata = msg。将flak返回的json数据绑定到data中，然后就会在页面中渲染出来。
// A code block this.$axios.post('http://localhost:8280/upload', formData, config).then(function (response)
export default { name: 'class', data: function () { return { getdata: { classify: '**', state: '**', type: '**' } } }, methods: { getFile (event) { this.file = event.target.files[0] console.log(this.file) console.log(1111) }, submitForm (event) { event.preventDefault() const formData = new FormData() formData.append('file', this.file) var that = this const config = { headers: { 'Content-Type': 'multipart/form-data' } } this.$axios.post('http://localhost:8280/upload', formData, config).then(function (response) { if (response.status === 200) { var msg = response.data that.getdata = msg console.log(response.data.classify) console.log(response.data) console.log(222) } }) } } }
下面是完整代码
<template> <div> <a-layout> <a-layout-header>Header</a-layout-header> <a-layout> <a-layout-content><h1>下面是测试</h1> <form enctype=multipart/form-data> <p></p> <input type="file" @change="getFile($event)"> <button @click="submitForm($event)">提交</button> </form></a-layout-content> <a-layout-sider> <p></p> <span>{{getdata.classify}}</span> <p></p> <span>{{getdata.state}}</span> <p></p> <span>{{getdata.type}}</span> </a-layout-sider> </a-layout> <a-layout-footer>Footer</a-layout-footer> </a-layout> </div> </template> <script> export default { name: 'class', data: function () { return { getdata: { classify: '**', state: '**', type: '**' } } }, methods: { getFile (event) { this.file = event.target.files[0] console.log(this.file) console.log(1111) }, submitForm (event) { event.preventDefault() const formData = new FormData() formData.append('file', this.file) var that = this const config = { headers: { 'Content-Type': 'multipart/form-data' } } this.$axios.post('http://localhost:8280/upload', formData, config).then(function (response) { if (response.status === 200) { var msg = response.data that.getdata = msg console.log(response.data.classify) console.log(response.data) console.log(222) } }) } } } </script> <style scoped> </style>
flask
下面是flask的代码，from flask_cors import CORS
CORS(app, resources=r’/*')这是解决跨域请求报错的设置。
from flask import Flask from flask import request, jsonify,render_template import base64 import cv2 import os import time from werkzeug.utils import secure_filename import detection_mobilenetv2 as test from flask_cors import CORS app = Flask(__name__) CORS(app, resources=r'/*') @app.route('/') def hello_world(): app.logger.error("sss") return 'Hello World!' //这里是主要接口测试路径 @app.route('/upload', methods=['POST', 'GET']) def upload(): if request.method == 'POST': f = request.files['file'] basepath = os.path.dirname(__file__) //把接受的文件报错起来 upload_path = os.path.join(basepath, 'static\\img', secure_filename(f.filename)) fname, fename = os.path.split(upload_path) f.save(upload_path) //你的项目对这张图片干的事 total,nomask=test.pic_show(upload_path) //json数据返回 result_dict = dict() result_dict["classify"] = "mask_detect" result_dict["state"] = "-1" result_dict["type"] = "noFace" return jsonify(result_dict) if __name__ == '__main__': app.run(host="0.0.0.0",port=8280,debug=False)
大概就是这样了。
