Vue前端 向 后端Flask 传文件数据并保存

简介

采用vue 编写前端，上传图像文件，发送到后端flask，由后端保存

前端代码

<template>
<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>
</template>

<script>
export default {
methods: {
      update(e){
        let file = e.target.files[0];
        let param = new FormData(); //创建form对象
        param.append('file',file);//通过append向form对象添加数据
        console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
        this.$axios.post('http://127.0.0.1:5000/upload',param,{headers:{'Content-Type':'application/x-www-form-urlencoded' }}, ) //请求头要为表单
          .then(response=>{
            console.log(response.data);
          })
          .catch(function (error) {
            console.log(error);
          })
      }
    }
}
</script>

后端代码

from flask import Flask, render_template, request, jsonify
from flask_cors import CORS  #Flask的跨域问题
import os
import json

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = r"./upload"
CORS(app)                   #Flask的跨域问题

@app.route('/')

@app.route('/upload',methods=["POST"]) # 方法要与前端一致
def upload():
    file_obj = request.files['file']  # Flask中获取文件
    if file_obj is None:
        # 表示没有发送文件
        return "未上传文件"
    #保存文件
    file_path = os.path.join(app.config['UPLOAD_FOLDER'], "1.jpg")     
    file_obj.save(file_path)
    return file_path

if __name__ == "__main__":
    app.run()

关键问题

1. Axios的表单申请
   申请头中的Content-Type
   

headers:{'Content-Type':'application/x-www-form-urlencoded' 

2. Falsk的跨域问题
   安装 flask_cors

3.Flask获取文件
request.files()