如何用Axios上传图片？后端出现KeyError:'file'错误求助

看起来你在使用Axios上传图片到Flask后端时遇到了KeyError: 'file'的报错，这是前端没有正确传递文件对象导致的，我来帮你一步步解决：

问题根源 #

你当前的前端代码错误地把预览图片的DOM元素（$('#selected-image').get(0)）添加到了FormData里，而不是用户实际选择的文件对象。后端request.files['file']找不到对应的文件键，所以抛出了400 Bad Request和KeyError。

修正后的完整前端代码 #

// 图片选择与预览逻辑（补上关键的readAsDataURL调用）
$("#image-selector").change(function () { 
  let reader = new FileReader(); 
  reader.onload = function () { 
    let dataURL = reader.result; 
    $("#selected-image").attr("src", dataURL); 
  }
  // 必须调用这一步才能读取文件并生成预览URL
  reader.readAsDataURL(this.files[0]);
})

// 修正后的上传请求逻辑
function uploadImage() {
  // 从文件选择框中获取实际的文件对象
  const selectedFile = $('#image-selector')[0].files[0];
  if (!selectedFile) {
    console.log("请先选择图片");
    return;
  }

  const formData = new FormData();
  // 将真实文件对象添加到FormData，键名保持'file'和后端对应
  formData.append('file', selectedFile);

  axios.post('/file', formData)
    .then(res => { 
      console.log("上传成功:", res.data); 
    })
    .catch(error => { 
      console.error("上传失败:", error); 
    });
}

几个关键修正点 #

• 获取正确的文件对象：要从<input type="file" id="image-selector">中通过files[0]拿到用户选择的文件，而不是预览用的<img>元素。
• 补上FileReader的readAsDataURL调用：你之前的预览代码里缺少了这一步，导致图片预览不会生效，现在补上后就能正常显示选中的图片了。
• 移除手动设置的Content-Type：当使用FormData时，Axios会自动生成包含正确边界符的multipart/form-data请求头，手动设置反而会丢失边界符，导致后端无法解析表单数据。

后端代码的补充检查 #

确保你的allowed_file函数是正确实现的，比如：

ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}

def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

如果需要保存文件，还要确保Flask配置了上传目录：

import os
from flask import Flask, request

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = os.path.join(app.root_path, 'uploads')
# 确保上传目录存在
os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)

测试验证 #

修改后，前端发送的请求会正确携带文件，后端request.files['file']就能正常获取到上传的文件对象，后续你可以继续完成文件保存或其他处理逻辑。

内容的提问来源于stack exchange，提问作者cnd