上传图片：在服务器上找不到请求的 URL答案

【问题标题】：uploading an image: requested URL was not found on the server上传图片：在服务器上找不到请求的 URL
【发布时间】：2021-02-11 16:49:55
【问题描述】：

我对烧瓶很陌生，我正在尝试创建一个简单的图像上传器应用程序。

我已对照其他指南检查了我的代码，了解如何创建此类应用程序，我的代码看起来没问题，但是当我尝试实际提交图像时，它显示“在服务器”。我想我的 js 可能有错误，因为控制台没有记录“成功”，但我不知道如何解决这个问题。任何帮助都将不胜感激和需要。

我的 js 和 html 代码：

$(document).ready(function() {
    $("submission").click(function() {
        var form_data = new FormData($('#submit_file')[0]);
        $.ajax({
            type: 'POST',
            url: '/submit_image',
            data: form_data,
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                console.log("success");
            }

        })
    })
})

<body>
    <h1>Image Upload</h1>
    <form action="/submit_image" id = "submit_file">
        <input type="file" id="image_file" name="image_to_be_uploaded">
        <input type="submit" id="submission">
    </form>
</body>

这是我的 python/flask 代码：

@app.route('/submit_image', methods=['POST'])
def submit_image():
    if request.method == 'POST':
        file_val = request.files['file']
        #if file_val.filename != '':
        file_val.save(file_val.filename)
        return redirect(url_for('index'))

@app.errorhandler(413)
def too_large(e):
    return "File is too large", 413

【问题讨论】：

显示未找到的网址
@Frenchy 你是这个意思吗？ 127.0.0.1:5000/submit_image?image_to_be_uploaded=368757_600.jpg
它说 404 not found （在服务器上找不到请求的 URL。如果您手动输入了 URL，请检查您的拼写并重试。）
所以服务器没有找到文件..你把图像放在哪里了？文件夹？
@Frenchy 图片在我的桌面上。从理论上讲，我应该能够从我的计算机中提取任何图像并提交/上传它......

标签： javascript html jquery ajax flask

【解决方案1】：

您的 javascript 代码将永远不会被执行。表单以其标准行为传输。
由于您没有指定属性方法，因此使用 GET 方法传输表单。

<form 
  name="submit_image" 
  action="{{ url_for('submit_image') }}" 
  method="post" 
  enctype="multipart/form-data"
>
  <input type="file" name="image" />
  <input type="submit" />
</form>

根据名称查询传输的表单数据。

@app.route('/submit_image', methods=['GET', 'POST'])
def submit_image():
    if request.method == 'POST':
        file_val = request.files['image']
        # if file_val.filename != '':
        #   Handle empty filename here!
        file_val.save(file_val.filename)
        return redirect(url_for('index'))
    
    return render_template('submit_image.html')

现在它应该可以在没有 javascript 的情况下工作。

如果您想通过 Javascript 代码发送图像并使用提交按钮，我建议您也使用表单的提交事件。 preventDefault 函数抑制表单的标准行为。

$(document).ready(function() {
  $("form[name='submit_image']").submit(function(event) {
    event.preventDefault();
    const formData = new FormData($(this)[0]);
    $.ajax({
      type: $(this).attr("method"),
      url: $(this).attr("action"),
      data: formData,
      contentType: false,
      cache: false,
      processData: false,
      success: function(data) {
        console.log("success");
      }
    });
  });
});

它现在应该可以工作了。

以下代码是如何将文件保存在文件夹中并再次提供它们的示例。您将需要创建一个新文件夹。 "/var/app-instance/images"

import os
from flask import (
    current_app,
    redirect, 
    render_template, 
    request, 
    send_from_directory
)
from werkzeug.utils import secure_filename

def allowed_file(filename):
    allowed_extensions = current_app.config.get(
        'ALLOWED_EXTENSIONS',
        { 'png', 'jpg', 'jpeg', 'gif' }
    )
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in allowed_extensions

@app.route('/submit_image', methods=['GET', 'POST'])
def submit_image():
    dest_folder = current_app.config.get('UPLOAD_FOLDER', 'images')

    if request.method == 'POST':
        if 'image' not in request.files:
            return redirect(request.url)

        file_val = request.files['image']

        if file_val.filename == '':
            return redirect(request.url)
        
        if file_val and allowed_file(file_val.filename):
            dest = os.path.join(
                current_app.instance_path,
                dest_folder,
                secure_filename(file_val.filename))
            file_val.save(dest)

    images = os.listdir(os.path.join(
        current_app.instance_path,
        dest_folder))

    return render_template('submit_image.html', images=images)

@app.route('/serve_image/<path:filename>')
def serve_image(filename):
    dest_folder = current_app.config.get('UPLOAD_FOLDER', 'images')
    return send_from_directory(
        os.path.join(current_app.instance_path, dest_folder),
        filename
    )

<h1>Image Upload</h1>
<form
  name="submit_image"
  action="{{ url_for('submit_image') }}"
  method="post"
  enctype="multipart/form-data"
>
  <input type="file" name="image" accept="image/*" />
  <input type="submit" />
</form>

<table>
  {% for img in images -%}
  <tr>
    <td>
      <img
        src="{{ url_for('serve_image', filename=img) }}"
        style="width: 84px; height: auto;" />
      </td>
    <td>
      <a
        href="{{ url_for('serve_image', filename=img) }}"
        target="_blank"
      >{{ img }}</a>
    </td>
  </tr>
  {% endfor -%}
</table>

【讨论】：

@norwegian_forest 检查输入字段的属性“名称”。如果它与request.files 中的查询不匹配，则会抛出KeyError 类型，从而导致此错误消息。查询的键值对不是表单数据的一部分。
@norwegian_forest 提交完成后，应写入文件。您使用了我的代码的哪些部分？控制台内部是否抛出错误？
我使用了你代码的所有部分。我在控制台中的唯一消息是 "POST /submit_image HTTP/1.1" 302 - 和 "GET / HTTP/1.1" 200 - 。在您注释掉的部分中，我确实做了 if file_val.filename == '': return "Invalid image", 400 ，但是无论我是否注释掉该部分，结果都是一样的
javascript 代码不再执行。但是应该写一个文件。由于重定向，您将使用状态代码 302 FOUND 转发。请再次比较代码并查看您启动图像应用程序的目录。从远处很难发现故障。
@norwegian_forest 他们出现在哪个文件夹中？您应该列出目录中的文件。一个名为“static”的文件夹，您可以在url_for('static', filename = <your_filename>) 的帮助下从中加载文件，在这种情况下具有特殊的含义。否则，您将需要一条新路线，并且必须使用 send_from_directory(<directory>, <filename>) 自己提供文件。