Веб-API Flask не распознает файлы изображений, отправленные через AJAX
У меня есть очень простой Flask API, который работает с моделью DNN.
Бэкэнд Python выглядит так:
from flask import request
from flask import jsonify
from flask import Flask
import io
app = Flask(__name__)
@app.route("/predict", methods=["POST"])
def predict():
response = {"success": False}
if request.method == "POST":
if request.files.get("image"):
image = request.files["image"].read()
image = Image.open(io.BytesIO(image))
#...
response = {"success": True}
else:
print('Wrong file')
else:
print('Wrong method')
return jsonify(response)
Упрощенный интерфейс JavaScript:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input id = "image_selector" type = "file">
<button id = "predict_button">Predict</button>
<p style = "font-weight: bold;">Predictions</p>
<p>Prediction: <span id = "prediction_text"></span></p>
<img id = "selected-image" src = "">
<script src = "https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
let base64Image
var fd = new FormData();
$('#image_selector').change(function() {
let reader = new FileReader()
reader.onload = function(e) {
let dataURL = reader.result
$('#selected-image').attr("src", dataURL)
base64Image = dataURL.replace("data:image/jpeg;base64,", "")
console.info(base64Image)
}
fd.append('file', $('#image_selector')[0].files[0])
reader.readAsDataURL($('#image_selector')[0].files[0])
$('#prediction_text').text("")
})
$('#predict_button').click(function(event) {
let message = {
image: base64Image
}
console.info(message)
$.ajax({
url: "http://localhost:5000/predict",
type: 'POST',
data:fd,
contentType: false,
processData: false,
success: function (response) {
if (response.error) {
$('#prediction_text').text('ERROR')
}
else {
$('#prediction_text').text(response.prediction)
}
console.info(response)
},
error: function () {
},
});
})
</script>
</body>
</html>
Когда я пытаюсь опубликовать файл изображения, в приложении Flask изображение не может передать второй if и печатает «Неверный файл».
Поскольку эта команда cURL работает отлично:
curl -X POST -F [email protected] 'http://127.0.0.1:5000/predict'
Я предполагаю, что есть проблема с форматом файла, но я не уверен, что это такое.
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
1
60
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
попробуйте request.files["image"] или request.files['file'] вместо request.files.get("image")
для лучшей реализации отметьте Загрузить изображение во Flask
Я попробовал это, хотя это работает, теперь я получаю 400 Bad request, я отредактировал пост и добавил больше подробностей о сервере.
—
09.12.2020 21:54
Ответ принят как подходящий
fd.append('file', $('#image_selector')[0].files[0])
Здесь изменение «файла» на «изображение» решило проблему. Я не знал, что имена действительно имеют значение в этом случае.
fd.append('image', $('#image_selector')[0].files[0])
Другие вопросы по теме
Тип по-прежнему str, а не float
Как создавать слои Photoshop с именами в Wand 0.6.5
Неправильное целочисленное значение mySQL
Discord.py — сканирование всех полей для встраивания определенной фразы
Получить некоторые значения из строки в python
Передача списка из функции в класс в Python
Как установить переменные даты в python в разных форматах?
Список столбцов, отвечающих определенному условию
LinAlgError: последние 2 измерения массива должны быть квадратными, матрицы не могут быть решены
Как найти самое длинное слово в строке без использования метода разделения
Похожие вопросы
Уменьшить элементы во вложенном массиве
Отображение информации из запроса LINQ
Почему мой пользовательский блок Гутенберга ломается при сохранении?
Как закрыть сокетное соединение для подписки на GraphQL в Apollo
Проверьте, есть ли у JSON дочерние элементы несколько раз в возврате
Почему моя страница прокручивается, когда я изменяю размер в своем браузере?
ExtJS, как заставить рисовать спрайты реагировать?
Сценарий приложений: как зацикливать диалоговые окна по нажатию двух кнопок?
Ошибка преобразования Swiper v4 для IE11 (с Webpack 5 + Babel 7)
Функция Javascript для фильтрации трех разных списков
Вы пытались проверить объект запроса? Например
request.files['file']?