从HTML向Flask传递宽高参数时出现类型错误的原因排查

错误根源 #

出现TypeError: 'NoneType' object cannot be interpreted as an integer的核心原因有三点：

1. 宽高参数类型不匹配：request.form.get()获取的是字符串类型，而Pillow的resize()方法要求传入整数；若参数未正确提交，还会返回None，直接传入必然报错。
2. HTML表单默认值无效：输入框的value设为字符串"width"，用户未修改直接提交时，拿到的是无法转为整数的无效值。
3. Dropzone与表单提交冲突：Dropzone默认异步上传文件，普通表单同步提交可能导致文件与宽高参数未同时被后端接收，进而参数为None。

修复步骤 #

1. 修正HTML表单与Dropzone配置 #

• 把输入框默认值改为合理整数，同时配置Dropzone提交时携带表单参数：

<form id="resize-form">
    <p>IN PIXELS</p>
    <label for="width">Width - </label>
    <input type="number" id="width" name="width" value="800" min="1">
    <label for="height">Height - </label>
    <input type="number" id="height" name="height" value="600" min="1">
</form>

添加Dropzone配置（假设你的Dropzone容器ID为myDropzone）：

Dropzone.options.myDropzone = {
  paramName: "file",
  init: function() {
    this.on("sending", function(file, xhr, formData) {
      // 追加表单中的宽高参数到上传请求
      formData.append("width", document.getElementById("width").value);
      formData.append("height", document.getElementById("height").value);
    });
  }
};

2. 修复Flask后端逻辑 #

• 对宽高参数做非空校验和类型转换，同时处理异常情况：

@app.route('/', methods=['GET', 'POST'])
def retrieve_images():
    if request.method == 'POST':
        file = request.files['file']
        filename = secure_filename(file.filename)
        if filename != '':
            file_ext = os.path.splitext(filename)[1]
            if file_ext not in app.config['UPLOAD_EXTENSIONS'] or \
            file_ext != validate_image(file.stream):
                return 'Invalid Image', 404
            
            # 处理宽高参数，设置默认值并捕获类型错误
            try:
                width = int(request.form.get("width", 800))
                height = int(request.form.get("height", 600))
            except ValueError:
                return 'Invalid width or height value', 400
            
            img_file = Image.open(file)
            # 可选：若需保持图片比例，替换resize为thumbnail
            # img_file.thumbnail((width, height), Image.LANCZOS)
            res_img = img_file.resize((width, height), Image.LANCZOS)
            save_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
            res_img.save(save_path)
            return 'Image resized and saved successfully'
        return 'No file uploaded', 400
    return render_template('index.html')

3. 额外优化建议 #

• 前端增加实时校验：用JavaScript检查宽高输入是否为正整数，提前拦截无效提交。
• 优先使用thumbnail()：如果不想图片被拉伸，该方法会按比例将图片缩放到指定尺寸范围内。

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