无法使用 Flask 和 Bootstrap-Vue 表单文件输入从 POST 请求中获取文件

Posted 2023-02-16

【中文标题】无法使用 Flask 和 Bootstrap-Vue 表单文件输入从 POST 请求中获取文件

【英文标题】：Can't get file from POST request using Flask and Bootstrap-Vue Form File Input

【发布时间】：2021-12-31 20:41:51

【问题描述】：

我正在尝试使用 Bootstrap-Vue 表单文件输入上传和图像，并使用 Axios 库通过 POST 将其发送到 Flask 后端，然后存储在一个文件夹中。

我的问题是 Flask 在“request.files”中找不到“文件”。很确定我陷入了新手错误。

这是我的代码：

前端：

<template>
  <div class="mx-5 container-fluid">
    <div class="mx-5 row">
      <div class="col-sm-10">
                <b-form-file
                  type="file"
                  id="file"
                  v-model="file"
                  :state="Boolean(file)"
                  ref="file"
                  placeholder="Choose a file or drop it here..."
                  drop-placeholder="Drop file here..."
                  v-on:change="submitFile"
                ></b-form-file>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default 
  data() 
    return 
      file: null,
    ;
  ,
  methods: 
    submitFile() 
      /* Initialize the form data */
      const path = 'http://localhost:5000/single-file';
      const formData = new FormData();
      /* Add the form data we need to submit */
      formData.append('file', this.file);
      /* Make the request to the POST /single-file URL */
      axios.post(path,
        formData,
        
          headers: 
            'Content-Type': 'multipart/form-data',
          ,
        ).then(() => 
        // console.log('SUCCESS!!');
      )
        .catch(() => 
          // console.log('FAILURE!!');
        );
    ,
  ,
;

后端：

from flask import Flask, jsonify, request, send_file, redirect, url_for
from werkzeug.utils import secure_filename
import os

# configuration
DEBUG = True
UPLOAD_FOLDER = '/images'
ALLOWED_EXTENSIONS = 'png', 'jpg', 'jpeg', 'gif'

@app.route('/single-file', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        # check if the post request has the file part
        if 'file' not in request.files:
            print('No file part')
            return redirect(request.url)
        file = request.files['file']
        # If the user does not select a file, the browser submits an
        # empty file without a filename.
        if file.filename == '':
            print('No selected file')
            return redirect(request.url)
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            return redirect(url_for('download_file', name=filename))
    return ''

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

我得到 HTTP 代码 302（重定向）并在控制台中打印“无文件部分”。

非常感谢任何帮助。

【参考方案1】：

我在您的代码中看不到明显的错误，看来请求是从您的前端和后端正确传递的。

在这种情况下，我建议使用 Postman 来解耦前端和后端。如果您在使用 Postman 时得到正确的响应，则可以缩小错误出在前端、浏览器或与 axios 相关的东西，它正在干预请求数据。

另外，尝试获取错误消息，或打印为什么烧瓶认为“文件”不在 request.files 中，如果一切按预期工作，它应该在那里